.intro p {
    max-width: 720px;
}
.gallery {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding-bottom: 96px;
    .grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 20px;
    }
    .tile {
        position: relative;
        display: block;
        aspect-ratio: 4 / 3;
        overflow: hidden;
        border-radius: 12px;
        background: var(--bg-4);
        &[hidden] {
            display: none;
        }
        &:focus-visible {
            outline: 2px solid var(--border-8);
            outline-offset: 2px;
        }
        img {
            height: 100%;
            transition: scale 0.6s ease;
        }
        &:not([data-type="photo"])::before {
            content: '';
            position: absolute;
            inset: 0;
            z-index: 1;
            background: color-mix(in srgb, var(--main-bg) 40%, transparent);
        }
    }
    .play {
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 2;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: color-mix(in srgb, var(--bg-4) 60%, transparent);
        backdrop-filter: blur(7px);
        translate: -50% -50%;
        transition: background 0.3s;
        &::before {
            content: '';
            position: absolute;
            top: 15px;
            left: 18px;
            width: 15px;
            height: 18px;
            background: var(--text-1);
            clip-path: polygon(0 0, 100% 50%, 0 100%);
        }
    }
    .duration {
        position: absolute;
        bottom: 12px;
        left: 12px;
        z-index: 2;
        font-family: 'Wix Madefor Text', sans-serif;
        font-size: 16px;
        line-height: 20px;
        letter-spacing: 0;
        color: var(--text-5);
    }
    .more {
        align-self: center;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 60px;
        padding: 0 32px;
        border: 1.5px solid var(--border-4);
        border-radius: 999px;
        background: none;
        font-size: 20px;
        line-height: 24px;
        font-weight: 500;
        letter-spacing: 0;
        transition: border-color 0.3s, color 0.3s;
    }
}
.viewer {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    padding: 0;
    border: 0;
    background: color-mix(in srgb, var(--main-bg) 96%, transparent);
    overscroll-behavior: contain;
    &[open] {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    &::backdrop {
        background: var(--main-bg);
    }
    .frame {
        display: flex;
        justify-content: center;
        align-items: center;
        width: calc(100% - 240px);
        height: calc(100% - 160px);
        touch-action: pan-y;
        :is(img, video) {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
        img {
            animation: viewer-in 0.35s ease;
        }
        iframe {
            width: min(100%, calc((100dvh - 160px) * 16 / 9));
            aspect-ratio: 16 / 9;
            border: 0;
            border-radius: 12px;
        }
    }
    .count {
        position: absolute;
        top: 32px;
        left: 40px;
        font-family: 'Wix Madefor Text', sans-serif;
        font-size: 16px;
        line-height: 20px;
        letter-spacing: 0;
        color: var(--text-4);
    }
    :is(.close, .prev, .next) {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: var(--bg-4);
        transition: background 0.3s;
        &::before {
            font-family: 'icon';
            font-size: 16px;
        }
        &:focus-visible {
            outline: 2px solid var(--border-8);
            outline-offset: 2px;
        }
        &:disabled {
            opacity: 0.4;
            cursor: default;
        }
    }
    .close {
        top: 20px;
        right: 40px;
        &::before {
            content: '\e005';
        }
    }
    :is(.prev, .next) {
        top: 50%;
        translate: 0 -50%;
        &::before {
            content: '\e013';
            rotate: 45deg;
        }
    }
    .prev {
        left: 40px;
        &::before {
            rotate: -135deg;
        }
    }
    .next {
        right: 40px;
    }
}
body:has(.viewer[open]) {
    overflow: hidden;
}
body.reveal .gallery .tile:not([hidden]) {
    opacity: 0;
    translate: 0 40px;
    transition: opacity 0.8s ease var(--delay, 0s), translate 0.8s ease var(--delay, 0s);
    &.in {
        opacity: 1;
        translate: 0 0;
    }
}
@keyframes viewer-in {
    from {
        opacity: 0;
        scale: 0.97;
    }
}
@media screen and (max-width: 1599px) {
    .gallery .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media screen and (max-width: 1759px) {
    .gallery {
        padding-bottom: 80px;
        .grid {
            gap: 16px;
        }
        .more {
            height: 56px;
            padding: 0 24px;
        }
    }
}
@media screen and (max-width: 1279px) {
    .gallery .more {
        font-size: 16px;
        line-height: 20px;
    }
    .viewer {
        .frame {
            width: calc(100% - 160px);
        }
        :is(.prev, .next) {
            width: 48px;
            height: 48px;
        }
        .prev {
            left: 16px;
        }
        .next {
            right: 16px;
        }
    }
}
@media screen and (max-width: 767px) {
    .gallery {
        gap: 24px;
        padding-bottom: 56px;
        .grid {
            gap: 12px;
        }
        .play {
            width: 40px;
            height: 40px;
            &::before {
                top: 12px;
                left: 15px;
                width: 13px;
                height: 16px;
            }
        }
        .duration {
            bottom: 8px;
            left: 8px;
            font-size: 12px;
            line-height: 16px;
        }
        .more {
            align-self: stretch;
            height: 48px;
        }
    }
    .viewer {
        .frame {
            width: 100%;
            height: calc(100% - 176px);
            iframe {
                border-radius: 0;
                width: 100%;
            }
        }
        .count {
            top: 28px;
            left: 16px;
        }
        .close {
            top: 16px;
            right: 16px;
            width: 48px;
            height: 48px;
        }
        :is(.prev, .next) {
            top: auto;
            bottom: 24px;
            translate: none;
        }
        .prev {
            left: calc(50% - 56px);
        }
        .next {
            right: calc(50% - 56px);
        }
    }
}
@media (hover: hover) {
    .gallery {
        .tile:hover {
            img {
                scale: 1.05;
            }
            .play {
                background: var(--bg-8);
            }
        }
        .more:hover {
            border-color: var(--bg-2);
            color: var(--text-2);
        }
    }
    .viewer :is(.close, .prev, .next):not(:disabled):hover {
        background: var(--bg-8);
    }
}
@media (prefers-reduced-motion: reduce) {
    .viewer .frame img {
        animation: none;
    }
}