:root {
  --larger: 1.5;
  --large: 2;
  --v-shift: 0.1em;
  --h-margin: 0.3em;
  --width: 1.2em;
  --height: 0.8em;
}

.flag {
  position: relative;
  padding-left: calc(var(--width) + var(--h-margin));
  display: inline-block;
}
.flag.flag-only {
  white-space: nowrap;
  width: 0;
  overflow: hidden;
  height: calc(1.2 * var(--height));
  padding-left: var(--width);
  margin-top: var(--v-shift);
  margin-bottom: calc(-1 * var(--v-shift));
}
.flag::before {
  content: "";
  display: block;
  position: absolute;
  width: var(--width);
  height: var(--height);
  margin: var(--v-shift) var(--h-margin) calc(-1 * var(--v-shift)) calc(-1 * ( var(--width) + var(--h-margin) ) );
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 50% 50%;
}
.flag.flag-only::before {
  margin: var(--v-shift) var(--h-margin) calc(-1 * var(--v-shift)) calc(-1 * var(--width));
}

/* větší varianta "larger" */
.flag.flag-larger {
  padding-left: calc(( var(--width) + var(--h-margin) ) * var(--larger));
}
.flag.flag-larger.flag-only {
  padding-left: calc(var(--width) * var(--larger));
  height: calc(var(--height) * var(--larger));
  margin-top: calc(var(--v-shift) * var(--larger));
  margin-bottom: calc(-1 * var(--v-shift) * var(--larger));
}
.flag.flag-larger::before {
  font-size: calc(100% * var(--larger));
  margin-left: calc(-1 * var(--width));
  margin-right: calc(var(--h-margin) / var(--larger));
}
.flag.flag-larger:not(.flag-only)::before {
  margin-left: calc(-1 * ( var(--width) + var(--h-margin) ) );
  font-size: calc(100% * var(--larger));
}

/* velká varianta "large" */
.flag.flag-large {
  padding-left: calc(( var(--width) + var(--h-margin) ) * var(--large));
}
.flag.flag-large.flag-only {
  padding-left: calc(var(--width) * var(--large));
  height: calc(var(--height) * var(--large));
  margin-top: calc(var(--v-shift) * var(--large));
  margin-bottom: calc(-1 * var(--v-shift) * var(--large));
}
.flag.flag-large::before {
  font-size: calc(100% * var(--large));
  margin-left: calc(-1 * var(--width));
  margin-right: calc(var(--h-margin) / var(--large));
}
.flag.flag-large:not(.flag-only)::before {
  margin-left: calc(-1 * ( var(--width) + var(--h-margin) ) );
  font-size: calc(100% * var(--large));
}

/* samotné vlajky */
.flag.AF::before {background-image: url("/gr/flags/af.svg")}
.flag.AL::before {background-image: url("/gr/flags/al.svg")}
.flag.DZ::before {background-image: url("/gr/flags/dz.svg")}
.flag.AS::before {background-image: url("/gr/flags/as.svg")}
.flag.AD::before {background-image: url("/gr/flags/ad.svg")}
.flag.AO::before {background-image: url("/gr/flags/ao.svg")}
.flag.AI::before {background-image: url("/gr/flags/ai.svg")}
.flag.AQ::before {background-image: url("/gr/flags/aq.svg")}
.flag.AG::before {background-image: url("/gr/flags/ag.svg")}
.flag.AR::before {background-image: url("/gr/flags/ar.svg")}
.flag.AM::before {background-image: url("/gr/flags/am.svg")}
.flag.AW::before {background-image: url("/gr/flags/aw.svg")}
.flag.AU::before {background-image: url("/gr/flags/au.svg")}
.flag.AT::before {background-image: url("/gr/flags/at.svg")}
.flag.AZ::before {background-image: url("/gr/flags/az.svg")}
.flag.BS::before {background-image: url("/gr/flags/bs.svg")}
.flag.BH::before {background-image: url("/gr/flags/bh.svg")}
.flag.BD::before {background-image: url("/gr/flags/bd.svg")}
.flag.BB::before {background-image: url("/gr/flags/bb.svg")}
.flag.BY::before {background-image: url("/gr/flags/by.svg")}
.flag.BE::before {background-image: url("/gr/flags/be.svg")}
.flag.BZ::before {background-image: url("/gr/flags/bz.svg")}
.flag.BJ::before {background-image: url("/gr/flags/bj.svg")}
.flag.BM::before {background-image: url("/gr/flags/bm.svg")}
.flag.BT::before {background-image: url("/gr/flags/bt.svg")}
.flag.BO::before {background-image: url("/gr/flags/bo.svg")}
.flag.BQ::before {background-image: url("/gr/flags/bq.svg")}
.flag.BA::before {background-image: url("/gr/flags/ba.svg")}
.flag.BW::before {background-image: url("/gr/flags/bw.svg")}
.flag.BV::before {background-image: url("/gr/flags/bv.svg")}
.flag.BR::before {background-image: url("/gr/flags/br.svg")}
.flag.IO::before {background-image: url("/gr/flags/io.svg")}
.flag.BN::before {background-image: url("/gr/flags/bn.svg")}
.flag.BG::before {background-image: url("/gr/flags/bg.svg")}
.flag.BF::before {background-image: url("/gr/flags/bf.svg")}
.flag.BI::before {background-image: url("/gr/flags/bi.svg")}
.flag.CV::before {background-image: url("/gr/flags/cv.svg")}
.flag.KH::before {background-image: url("/gr/flags/kh.svg")}
.flag.CM::before {background-image: url("/gr/flags/cm.svg")}
.flag.CA::before {background-image: url("/gr/flags/ca.svg")}
.flag.KY::before {background-image: url("/gr/flags/ky.svg")}
.flag.CF::before {background-image: url("/gr/flags/cf.svg")}
.flag.TD::before {background-image: url("/gr/flags/td.svg")}
.flag.CL::before {background-image: url("/gr/flags/cl.svg")}
.flag.CN::before {background-image: url("/gr/flags/cn.svg")}
.flag.CX::before {background-image: url("/gr/flags/cx.svg")}
.flag.CC::before {background-image: url("/gr/flags/cc.svg")}
.flag.CO::before {background-image: url("/gr/flags/co.svg")}
.flag.KM::before {background-image: url("/gr/flags/km.svg")}
.flag.CD::before {background-image: url("/gr/flags/cd.svg")}
.flag.CG::before {background-image: url("/gr/flags/cg.svg")}
.flag.CK::before {background-image: url("/gr/flags/ck.svg")}
.flag.CR::before {background-image: url("/gr/flags/cr.svg")}
.flag.HR::before {background-image: url("/gr/flags/hr.svg")}
.flag.CU::before {background-image: url("/gr/flags/cu.svg")}
.flag.CW::before {background-image: url("/gr/flags/cw.svg")}
.flag.CY::before {background-image: url("/gr/flags/cy.svg")}
.flag.CZ::before {background-image: url("/gr/flags/cz.svg")}
.flag.CI::before {background-image: url("/gr/flags/ci.svg")}
.flag.DK::before {background-image: url("/gr/flags/dk.svg")}
.flag.DJ::before {background-image: url("/gr/flags/dj.svg")}
.flag.DM::before {background-image: url("/gr/flags/dm.svg")}
.flag.DO::before {background-image: url("/gr/flags/do.svg")}
.flag.EC::before {background-image: url("/gr/flags/ec.svg")}
.flag.EG::before {background-image: url("/gr/flags/eg.svg")}
.flag.SV::before {background-image: url("/gr/flags/sv.svg")}
.flag.GQ::before {background-image: url("/gr/flags/gq.svg")}
.flag.ER::before {background-image: url("/gr/flags/er.svg")}
.flag.EE::before {background-image: url("/gr/flags/ee.svg")}
.flag.SZ::before {background-image: url("/gr/flags/sz.svg")}
.flag.ET::before {background-image: url("/gr/flags/et.svg")}
.flag.FK::before {background-image: url("/gr/flags/fk.svg")}
.flag.FO::before {background-image: url("/gr/flags/fo.svg")}
.flag.FJ::before {background-image: url("/gr/flags/fj.svg")}
.flag.FI::before {background-image: url("/gr/flags/fi.svg")}
.flag.FR::before {background-image: url("/gr/flags/fr.svg")}
.flag.GF::before {background-image: url("/gr/flags/gf.svg")}
.flag.PF::before {background-image: url("/gr/flags/pf.svg")}
.flag.TF::before {background-image: url("/gr/flags/tf.svg")}
.flag.GA::before {background-image: url("/gr/flags/ga.svg")}
.flag.GM::before {background-image: url("/gr/flags/gm.svg")}
.flag.GE::before {background-image: url("/gr/flags/ge.svg")}
.flag.DE::before {background-image: url("/gr/flags/de.svg")}
.flag.GH::before {background-image: url("/gr/flags/gh.svg")}
.flag.GI::before {background-image: url("/gr/flags/gi.svg")}
.flag.GR::before {background-image: url("/gr/flags/gr.svg")}
.flag.GL::before {background-image: url("/gr/flags/gl.svg")}
.flag.GD::before {background-image: url("/gr/flags/gd.svg")}
.flag.GP::before {background-image: url("/gr/flags/gp.svg")}
.flag.GU::before {background-image: url("/gr/flags/gu.svg")}
.flag.GT::before {background-image: url("/gr/flags/gt.svg")}
.flag.GG::before {background-image: url("/gr/flags/gg.svg")}
.flag.GN::before {background-image: url("/gr/flags/gn.svg")}
.flag.GW::before {background-image: url("/gr/flags/gw.svg")}
.flag.GY::before {background-image: url("/gr/flags/gy.svg")}
.flag.HT::before {background-image: url("/gr/flags/ht.svg")}
.flag.HM::before {background-image: url("/gr/flags/hm.svg")}
.flag.HN::before {background-image: url("/gr/flags/hn.svg")}
.flag.HK::before {background-image: url("/gr/flags/hk.svg")}
.flag.HU::before {background-image: url("/gr/flags/hu.svg")}
.flag.IS::before {background-image: url("/gr/flags/is.svg")}
.flag.IN::before {background-image: url("/gr/flags/in.svg")}
.flag.ID::before {background-image: url("/gr/flags/id.svg")}
.flag.IR::before {background-image: url("/gr/flags/ir.svg")}
.flag.IQ::before {background-image: url("/gr/flags/iq.svg")}
.flag.IE::before {background-image: url("/gr/flags/ie.svg")}
.flag.IM::before {background-image: url("/gr/flags/im.svg")}
.flag.IL::before {background-image: url("/gr/flags/il.svg")}
.flag.IT::before {background-image: url("/gr/flags/it.svg")}
.flag.JM::before {background-image: url("/gr/flags/jm.svg")}
.flag.JP::before {background-image: url("/gr/flags/jp.svg")}
.flag.JE::before {background-image: url("/gr/flags/je.svg")}
.flag.JO::before {background-image: url("/gr/flags/jo.svg")}
.flag.KZ::before {background-image: url("/gr/flags/kz.svg")}
.flag.KE::before {background-image: url("/gr/flags/ke.svg")}
.flag.KI::before {background-image: url("/gr/flags/ki.svg")}
.flag.KP::before {background-image: url("/gr/flags/kp.svg")}
.flag.KR::before {background-image: url("/gr/flags/kr.svg")}
.flag.KW::before {background-image: url("/gr/flags/kw.svg")}
.flag.KG::before {background-image: url("/gr/flags/kg.svg")}
.flag.LA::before {background-image: url("/gr/flags/la.svg")}
.flag.LV::before {background-image: url("/gr/flags/lv.svg")}
.flag.LB::before {background-image: url("/gr/flags/lb.svg")}
.flag.LS::before {background-image: url("/gr/flags/ls.svg")}
.flag.LR::before {background-image: url("/gr/flags/lr.svg")}
.flag.LY::before {background-image: url("/gr/flags/ly.svg")}
.flag.LI::before {background-image: url("/gr/flags/li.svg")}
.flag.LT::before {background-image: url("/gr/flags/lt.svg")}
.flag.LU::before {background-image: url("/gr/flags/lu.svg")}
.flag.MO::before {background-image: url("/gr/flags/mo.svg")}
.flag.MG::before {background-image: url("/gr/flags/mg.svg")}
.flag.MW::before {background-image: url("/gr/flags/mw.svg")}
.flag.MY::before {background-image: url("/gr/flags/my.svg")}
.flag.MV::before {background-image: url("/gr/flags/mv.svg")}
.flag.ML::before {background-image: url("/gr/flags/ml.svg")}
.flag.MT::before {background-image: url("/gr/flags/mt.svg")}
.flag.MH::before {background-image: url("/gr/flags/mh.svg")}
.flag.MQ::before {background-image: url("/gr/flags/mq.svg")}
.flag.MR::before {background-image: url("/gr/flags/mr.svg")}
.flag.MU::before {background-image: url("/gr/flags/mu.svg")}
.flag.YT::before {background-image: url("/gr/flags/yt.svg")}
.flag.MX::before {background-image: url("/gr/flags/mx.svg")}
.flag.FM::before {background-image: url("/gr/flags/fm.svg")}
.flag.MD::before {background-image: url("/gr/flags/md.svg")}
.flag.MC::before {background-image: url("/gr/flags/mc.svg")}
.flag.MN::before {background-image: url("/gr/flags/mn.svg")}
.flag.ME::before {background-image: url("/gr/flags/me.svg")}
.flag.MS::before {background-image: url("/gr/flags/ms.svg")}
.flag.MA::before {background-image: url("/gr/flags/ma.svg")}
.flag.MZ::before {background-image: url("/gr/flags/mz.svg")}
.flag.MM::before {background-image: url("/gr/flags/mm.svg")}
.flag.NA::before {background-image: url("/gr/flags/na.svg")}
.flag.NR::before {background-image: url("/gr/flags/nr.svg")}
.flag.NP::before {background-image: url("/gr/flags/np.svg")}
.flag.NL::before {background-image: url("/gr/flags/nl.svg")}
.flag.NC::before {background-image: url("/gr/flags/nc.svg")}
.flag.NZ::before {background-image: url("/gr/flags/nz.svg")}
.flag.NI::before {background-image: url("/gr/flags/ni.svg")}
.flag.NE::before {background-image: url("/gr/flags/ne.svg")}
.flag.NG::before {background-image: url("/gr/flags/ng.svg")}
.flag.NU::before {background-image: url("/gr/flags/nu.svg")}
.flag.NF::before {background-image: url("/gr/flags/nf.svg")}
.flag.MP::before {background-image: url("/gr/flags/mp.svg")}
.flag.NO::before {background-image: url("/gr/flags/no.svg")}
.flag.OM::before {background-image: url("/gr/flags/om.svg")}
.flag.PK::before {background-image: url("/gr/flags/pk.svg")}
.flag.PW::before {background-image: url("/gr/flags/pw.svg")}
.flag.PS::before {background-image: url("/gr/flags/ps.svg")}
.flag.PA::before {background-image: url("/gr/flags/pa.svg")}
.flag.PG::before {background-image: url("/gr/flags/pg.svg")}
.flag.PY::before {background-image: url("/gr/flags/py.svg")}
.flag.PE::before {background-image: url("/gr/flags/pe.svg")}
.flag.PH::before {background-image: url("/gr/flags/ph.svg")}
.flag.PN::before {background-image: url("/gr/flags/pn.svg")}
.flag.PL::before {background-image: url("/gr/flags/pl.svg")}
.flag.PT::before {background-image: url("/gr/flags/pt.svg")}
.flag.PR::before {background-image: url("/gr/flags/pr.svg")}
.flag.QA::before {background-image: url("/gr/flags/qa.svg")}
.flag.MK::before {background-image: url("/gr/flags/mk.svg")}
.flag.RO::before {background-image: url("/gr/flags/ro.svg")}
.flag.RU::before {background-image: url("/gr/flags/ru.svg")}
.flag.RW::before {background-image: url("/gr/flags/rw.svg")}
.flag.RE::before {background-image: url("/gr/flags/re.svg")}
.flag.BL::before {background-image: url("/gr/flags/bl.svg")}
.flag.SH::before {background-image: url("/gr/flags/sh.svg")}
.flag.KN::before {background-image: url("/gr/flags/kn.svg")}
.flag.LC::before {background-image: url("/gr/flags/lc.svg")}
.flag.MF::before {background-image: url("/gr/flags/mf.svg")}
.flag.PM::before {background-image: url("/gr/flags/pm.svg")}
.flag.VC::before {background-image: url("/gr/flags/vc.svg")}
.flag.WS::before {background-image: url("/gr/flags/ws.svg")}
.flag.SM::before {background-image: url("/gr/flags/sm.svg")}
.flag.ST::before {background-image: url("/gr/flags/st.svg")}
.flag.SA::before {background-image: url("/gr/flags/sa.svg")}
.flag.SN::before {background-image: url("/gr/flags/sn.svg")}
.flag.RS::before {background-image: url("/gr/flags/rs.svg")}
.flag.SC::before {background-image: url("/gr/flags/sc.svg")}
.flag.SL::before {background-image: url("/gr/flags/sl.svg")}
.flag.SG::before {background-image: url("/gr/flags/sg.svg")}
.flag.SX::before {background-image: url("/gr/flags/sx.svg")}
.flag.SK::before {background-image: url("/gr/flags/sk.svg")}
.flag.SI::before {background-image: url("/gr/flags/si.svg")}
.flag.SB::before {background-image: url("/gr/flags/sb.svg")}
.flag.SO::before {background-image: url("/gr/flags/so.svg")}
.flag.ZA::before {background-image: url("/gr/flags/za.svg")}
.flag.GS::before {background-image: url("/gr/flags/gs.svg")}
.flag.SS::before {background-image: url("/gr/flags/ss.svg")}
.flag.ES::before {background-image: url("/gr/flags/es.svg")}
.flag.LK::before {background-image: url("/gr/flags/lk.svg")}
.flag.SD::before {background-image: url("/gr/flags/sd.svg")}
.flag.SR::before {background-image: url("/gr/flags/sr.svg")}
.flag.SJ::before {background-image: url("/gr/flags/sj.svg")}
.flag.SE::before {background-image: url("/gr/flags/se.svg")}
.flag.CH::before {background-image: url("/gr/flags/ch.svg")}
.flag.SY::before {background-image: url("/gr/flags/sy.svg")}
.flag.TW::before {background-image: url("/gr/flags/tw.svg")}
.flag.TJ::before {background-image: url("/gr/flags/tj.svg")}
.flag.TZ::before {background-image: url("/gr/flags/tz.svg")}
.flag.TH::before {background-image: url("/gr/flags/th.svg")}
.flag.TL::before {background-image: url("/gr/flags/tl.svg")}
.flag.TG::before {background-image: url("/gr/flags/tg.svg")}
.flag.TK::before {background-image: url("/gr/flags/tk.svg")}
.flag.TO::before {background-image: url("/gr/flags/to.svg")}
.flag.TT::before {background-image: url("/gr/flags/tt.svg")}
.flag.TN::before {background-image: url("/gr/flags/tn.svg")}
.flag.TR::before {background-image: url("/gr/flags/tr.svg")}
.flag.TM::before {background-image: url("/gr/flags/tm.svg")}
.flag.TC::before {background-image: url("/gr/flags/tc.svg")}
.flag.TV::before {background-image: url("/gr/flags/tv.svg")}
.flag.UG::before {background-image: url("/gr/flags/ug.svg")}
.flag.UA::before {background-image: url("/gr/flags/ua.svg")}
.flag.AE::before {background-image: url("/gr/flags/ae.svg")}
.flag.GB::before {background-image: url("/gr/flags/gb.svg")}
.flag.UM::before {background-image: url("/gr/flags/um.svg")}
.flag.US::before {background-image: url("/gr/flags/us.svg")}
.flag.UY::before {background-image: url("/gr/flags/uy.svg")}
.flag.UZ::before {background-image: url("/gr/flags/uz.svg")}
.flag.VU::before {background-image: url("/gr/flags/vu.svg")}
.flag.VE::before {background-image: url("/gr/flags/ve.svg")}
.flag.VN::before {background-image: url("/gr/flags/vn.svg")}
.flag.VG::before {background-image: url("/gr/flags/vg.svg")}
.flag.VI::before {background-image: url("/gr/flags/vi.svg")}
.flag.WF::before {background-image: url("/gr/flags/wf.svg")}
.flag.EH::before {background-image: url("/gr/flags/eh.svg")}
.flag.YE::before {background-image: url("/gr/flags/ye.svg")}
.flag.ZM::before {background-image: url("/gr/flags/zm.svg")}
.flag.ZW::before {background-image: url("/gr/flags/zw.svg")}
.flag.AX::before {background-image: url("/gr/flags/ax.svg")}