.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: " ";
  opacity: 0; /* Adjust the opacity value as needed (0 = transparent, 1 = opaque) */
}
.fi.fis {
  width: 1em;
}

.fi-au {
  background-image: url(../flags/4x3/au.svg);
  background-size: cover; /* Make sure the background covers the entire container */
  border-radius: 50%; /* Make the container a circle by setting border-radius to 50% */
  display: inline-block; /* Adjust display property as needed */
}
.fi-au.fis {
  background-image: url(../flags/1x1/au.svg);
  background-size: cover; /* Make sure the background covers the entire container */
  border-radius: 50%; /* Make the container a circle by setting border-radius to 50% */
  display: inline-block; /* Adjust display property as needed */
}

.fi-cn {
  background-image: url(../flags/4x3/cn.svg);
  background-size: cover; /* Make sure the background covers the entire container */
  border-radius: 50%; /* Make the container a circle by setting border-radius to 50% */
  display: inline-block; /* Adjust display property as needed */
}
.fi-cn.fis {
  background-image: url(../flags/1x1/cn.svg);
  background-size: cover; /* Make sure the background covers the entire container */
  border-radius: 50%; /* Make the container a circle by setting border-radius to 50% */
  display: inline-block; /* Adjust display property as needed */
}