.fib, .fi {
  background-size: contain;
  background-position: 50%;
  background-repeat: no-repeat;
}

.fi {
  position: relative;
  display: inline-block;
  width: 1.333333em;
  line-height: 1em;
}
.fi:before {
  content: " ";
}
.fi.fis {
  width: 1em;
}

.fi-ca {
  background-image: url(flags/4x3/ca.svg);
}
.fi-ca.fis {
  background-image: url(flags/1x1/ca.svg);
}
.fi-fr {
  background-image: url(flags/4x3/fr.svg);
}
.fi-fr.fis {
  background-image: url(flags/1x1/fr.svg);
}
.fi-us {
  background-image: url(flags/4x3/us.svg);
}
.fi-us.fis {
  background-image: url(flags/1x1/us.svg);
}
.fi-mx {
  background-image: url(flags/4x3/mx.svg);
}
.fi-mx.fis {
  background-image: url(flags/1x1/mx.svg);
}