.region-flag {
    --region-flag-size: 32px;
    --region-flag-image-width: 24px;
    --region-flag-image-height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--region-flag-size);
    height: var(--region-flag-size);
    overflow: hidden;
    flex: 0 0 var(--region-flag-size);
    border: 1px solid rgba(100, 116, 139, .14);
    border-radius: 50%;
    background: #f8fafc;
    color: #475569;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    vertical-align: middle;
}

.region-flag__image {
    display: block;
    width: var(--region-flag-image-width);
    height: var(--region-flag-image-height);
    border: 1px solid rgba(15, 23, 42, .1);
    border-radius: 4px;
    background: #fff;
    object-fit: cover;
}

.region-flag__fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    color: inherit;
    font: inherit;
    letter-spacing: .02em;
}

.region-flag__fallback[hidden],
.region-flag__image[hidden] {
    display: none !important;
}