.fi-duo {
    display: inline-block;
    overflow: hidden;
    position: relative;
    width: calc(1.333333em * 1.2);
    line-height: 0;
    white-space: nowrap;
}

.fi-duo.fis {
    width: calc(1em * 1.2);
}

.fi-duo .fi:nth-child(2) {
    position: absolute;
    left: 50%;
    top: 0;
}

.fi-dnr {
    background-image: url(./4x3/dnr.svg);
    background-position: 50% 50%;
    background-size: cover;
}

.fi-dnr.fis {
    background-image: url(./1x1/dnr.svg);
    background-position: 50% 50%;
    background-size: cover;
}

.fi-abh {
    background-image: url(./4x3/abh.svg);
    background-position: 50% 50%;
    background-size: cover;
}

.fi-abh.fis {
    background-image: url(./4x3/abh.svg);
    background-position: 50% 50%;
    background-size: cover;
}

/* Флаг "неопределён" */
.fi-xx {
    background: #e9ecef !important;
    background-image: none !important;
    position: relative;
}
.fi-xx::after {
    content: "?";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.7em;
    font-weight: bold;
    color: #212529;
    line-height: 1;
}

/* Outline для флагов (чтобы белые флаги не сливались с фоном) */
.fi {
    outline: 1px solid #999;
}
.fi-duo {
    outline: 1px solid #999;
}
.fi-duo .fi {
    outline: none;
}

.fib, .fi {
    background-size: cover;
}