.flag {
    background-size: contain;
    background-position: 50%;
    background-repeat: no-repeat;
    position: relative;
    display: inline-block;
    width: 3rem;
    height: 3rem;
}

.flag:before {
     content: "\00a0"; /* ensure element is not empty (non breaking space) */
 }

.flag.round {
     border-radius: 50%;
 }

.flag.smaller {
     width: 1rem;
     height: 1rem;
 }
.flag.small {
     width: 2rem;
     height: 2rem;
 }
.flag.normal { /* also default */
     width: 3rem;
     height: 3rem;
 }
.flag.big {
     width: 4rem;
     height: 4rem;
 }
.flag.bigger {
     width: 5rem;
     height: 5rem;
 }
.flag.huge { /* just because we can */
     width: 10rem;
     height: 10rem;
 }

.flag.au {
    background-image: url('/img/flags/au.svg');
}
.flag.be {
    background-image: url('/img/flags/be.svg');
}
.flag.ca {
    background-image: url('/img/flags/ca.svg');
}
.flag.ch {
    background-image: url('/img/flags/ch.svg');
}
.flag.de {
    background-image: url('/img/flags/de.svg');
}
.flag.dk {
    background-image: url('/img/flags/dk.svg');
}
.flag.en {
    background-image: url('/img/flags/en.svg');
}
.flag.es {
    background-image: url('/img/flags/es.svg');
}
.flag.fi {
    background-image: url('/img/flags/fi.svg');
}
.flag.fr {
    background-image: url('/img/flags/fr.svg');
}
.flag.gb {
    background-image: url('/img/flags/gb.svg');
}
.flag.ie {
    background-image: url('/img/flags/ie.svg');
}
.flag.it {
    background-image: url('/img/flags/it.svg');
}
.flag.nl {
    background-image: url('/img/flags/nl.svg');
}
.flag.no {
    background-image: url('/img/flags/no.svg');
}
.flag.nz {
    background-image: url('/img/flags/nz.svg');
}
.flag.se {
    background-image: url('/img/flags/se.svg');
}
.flag.sg {
    background-image: url('/img/flags/sg.svg');
}

/* FIXME: Not wise to rely on hardcoded flags, but HC is dying anyway ... */