.qr-row {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    --qr-width: min(18vw, 220px);
    --qr-height: calc(var(--qr-width) * 1155 / 990);
    top: calc(var(--qr-height) / 2);
    gap: calc(var(--qr-width) / 2);
}

.qr-item {
    display: block;
    width: var(--qr-width);
    aspect-ratio: 990 / 1155;
    flex-shrink: 0;
    text-decoration: none;
    cursor: pointer;
}

.qr-item:focus-visible {
    outline: 2px solid #33ff66;
    outline-offset: 4px;
}

.qr-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@media (max-width: 640px) {
    .qr-row {
        --qr-width: min(28vw, 160px);
    }
}