html.belva-viewer-open,
html.belva-viewer-open body {
    overflow: hidden !important;
}

body.belva-project-page {
    background:
        radial-gradient(
            circle at 94% 3%,
            rgba(35,84,101,.12),
            transparent 30%
        ),
        radial-gradient(
            circle at 5% 1%,
            rgba(215,161,80,.06),
            transparent 25%
        ),
        #090d13;
}


/* duplicate legacy title */

.belva-project-page
.belva-project-duplicate-title {
    display: none !important;
}


/* project meta */

.belva-project-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 7px;

    width:
        min(
            calc(100% - 32px),
            1240px
        );

    margin:
        -8px auto 34px;
}

.belva-project-meta__item {
    display: inline-flex;
    align-items: center;

    min-height: 31px;

    padding:
        6px 11px;

    border:
        1px solid
        rgba(255,255,255,.10);

    border-radius:
        999px;

    background:
        rgba(255,255,255,.028);

    color:
        #9ba4ae;

    font-size:
        10px;

    font-weight:
        700;

    line-height:
        1;
}

.belva-project-meta__item:first-child {
    border-color:
        rgba(225,173,94,.40);

    background:
        rgba(225,173,94,.09);

    color:
        #efc67d;
}


/* gallery title */

.belva-gallery-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 22px;

    width:
        min(
            calc(100% - 32px),
            1240px
        );

    margin:
        0 auto 18px;
}

.belva-gallery-heading__eyebrow {
    display: block;

    margin-bottom: 7px;

    color:
        #e1ad5e;

    font-size:
        10px;

    font-weight:
        850;

    letter-spacing:
        .10em;

    text-transform:
        uppercase;
}

.belva-gallery-heading h2 {
    margin:
        0 !important;

    color:
        #f7f5f0 !important;

    font-size:
        clamp(
            31px,
            4vw,
            50px
        ) !important;

    font-weight:
        750 !important;

    line-height:
        1 !important;

    letter-spacing:
        -.04em !important;
}

.belva-gallery-heading__count {
    flex:
        0 0 auto;

    padding:
        8px 11px;

    border:
        1px solid
        rgba(255,255,255,.10);

    border-radius:
        999px;

    background:
        rgba(255,255,255,.025);

    color:
        #9aa3ad;

    font-size:
        10px;

    font-weight:
        750;
}


/*
 * Основная галерея.
 * Работает уже от class на body,
 * даже если JS ещё не успел стартовать.
 */

.belva-project-page .gallery,
.belva-project-page .belva-gallery-host {
    display:
        grid !important;

    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        ) !important;

    grid-auto-flow:
        dense;

    gap:
        12px !important;

    width:
        min(
            calc(100% - 32px),
            1240px
        ) !important;

    max-width:
        none !important;

    margin:
        0 auto 66px !important;

    padding:
        0 !important;

    background:
        transparent !important;
}


.belva-project-page .gallery > a,
.belva-project-page
.belva-gallery-item {
    position:
        relative;

    display:
        block !important;

    min-width:
        0 !important;

    margin:
        0 !important;

    padding:
        0 !important;

    overflow:
        hidden !important;

    border:
        1px solid
        rgba(255,255,255,.095) !important;

    border-radius:
        14px !important;

    background:
        #11161c !important;

    box-shadow:
        0 16px 46px
        rgba(0,0,0,.16);

    cursor:
        zoom-in;

    text-decoration:
        none !important;

    transition:
        transform .20s ease,
        border-color .20s ease,
        box-shadow .20s ease;
}


.belva-project-page
.gallery > a:first-child,
.belva-project-page
.belva-gallery-item.is-featured {
    grid-column:
        span 2;

    grid-row:
        span 2;
}


.belva-project-page
.gallery > a:hover,
.belva-project-page
.belva-gallery-item:hover {
    z-index:
        3;

    transform:
        translateY(-3px);

    border-color:
        rgba(225,173,94,.42) !important;

    box-shadow:
        0 23px 65px
        rgba(0,0,0,.25);
}


.belva-project-page
.gallery > a::before,
.belva-project-page
.belva-gallery-item::before {
    content:
        "";

    position:
        absolute;

    z-index:
        2;

    inset:
        0;

    background:
        linear-gradient(
            180deg,
            transparent 62%,
            rgba(0,0,0,.31)
        );

    opacity:
        .32;

    pointer-events:
        none;

    transition:
        opacity .20s ease;
}


.belva-project-page
.gallery > a:hover::before,
.belva-project-page
.belva-gallery-item:hover::before {
    opacity:
        .72;
}


.belva-project-page
.gallery > a::after,
.belva-project-page
.belva-gallery-item::after {
    content:
        "Открыть";

    position:
        absolute;

    z-index:
        4;

    right:
        10px;

    bottom:
        10px;

    padding:
        6px 10px;

    border:
        1px solid
        rgba(255,255,255,.16);

    border-radius:
        999px;

    background:
        rgba(5,8,11,.78);

    color:
        #fff;

    font-size:
        9px;

    font-weight:
        800;

    opacity:
        0;

    transform:
        translateY(4px);

    backdrop-filter:
        blur(10px);

    transition:
        opacity .18s ease,
        transform .18s ease;
}


.belva-project-page
.gallery > a:hover::after,
.belva-project-page
.belva-gallery-item:hover::after {
    opacity:
        1;

    transform:
        translateY(0);
}


.belva-project-page
.gallery > a img,
.belva-project-page
.belva-gallery-item img {
    display:
        block !important;

    width:
        100% !important;

    height:
        100% !important;

    min-width:
        0 !important;

    min-height:
        0 !important;

    margin:
        0 !important;

    padding:
        0 !important;

    border:
        0 !important;

    border-radius:
        0 !important;

    aspect-ratio:
        4 / 3;

    object-fit:
        cover !important;

    transition:
        transform .36s ease,
        filter .36s ease;
}


.belva-project-page
.gallery > a:first-child img,
.belva-project-page
.belva-gallery-item.is-featured img {
    min-height:
        100% !important;
}


.belva-project-page
.gallery > a:hover img,
.belva-project-page
.belva-gallery-item:hover img {
    transform:
        scale(1.026);

    filter:
        saturate(1.035)
        contrast(1.012);
}


/* fullscreen viewer */

.belva-viewer {
    position:
        fixed;

    z-index:
        2147483000;

    inset:
        0;

    display:
        grid;

    grid-template-rows:
        auto
        minmax(0,1fr)
        auto;

    background:
        rgba(2,4,7,.982);

    color:
        #f7f5f0;

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

    transition:
        opacity .18s ease,
        visibility .18s ease;
}


.belva-viewer.is-open {
    opacity:
        1;

    visibility:
        visible;

    pointer-events:
        auto;
}


.belva-viewer__top {
    position:
        relative;

    z-index:
        20;

    display:
        grid;

    grid-template-columns:
        minmax(0,1fr)
        auto;

    align-items:
        center;

    gap:
        14px;

    min-height:
        66px;

    padding:
        max(
            11px,
            env(safe-area-inset-top)
        )
        16px
        11px;

    border-bottom:
        1px solid
        rgba(255,255,255,.075);

    background:
        rgba(7,9,12,.91);

    backdrop-filter:
        blur(18px);
}


.belva-viewer__identity {
    min-width:
        0;
}


.belva-viewer__identity strong {
    display:
        block;

    overflow:
        hidden;

    color:
        #fff;

    font-size:
        13px;

    font-weight:
        800;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.belva-viewer__identity span {
    display:
        block;

    margin-top:
        3px;

    color:
        #929ba6;

    font-size:
        10px;
}


.belva-viewer__tools {
    display:
        flex;

    align-items:
        center;

    gap:
        6px;
}


.belva-viewer__button {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        44px;

    height:
        44px;

    padding:
        0 10px;

    border:
        1px solid
        rgba(255,255,255,.11);

    border-radius:
        10px;

    background:
        rgba(255,255,255,.035);

    color:
        #fff;

    font:
        inherit;

    font-size:
        14px;

    font-weight:
        800;

    cursor:
        pointer;
}


.belva-viewer__button:hover {
    border-color:
        rgba(225,173,94,.40);

    background:
        rgba(225,173,94,.08);
}


.belva-viewer__button:focus-visible,
.belva-viewer__nav:focus-visible,
.belva-viewer__thumb:focus-visible {
    outline:
        3px solid
        #e1ad5e;

    outline-offset:
        2px;
}


.belva-viewer__zoom {
    min-width:
        58px;

    color:
        #cbd0d7;

    font-size:
        10px;
}


.belva-viewer__stage {
    position:
        relative;

    min-height:
        0;

    overflow:
        hidden;

    user-select:
        none;

    touch-action:
        none;
}


.belva-viewer__media {
    position:
        absolute;

    inset:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    padding:
        18px 76px;
}


.belva-viewer__status {
    position:
        absolute;

    z-index:
        2;

    top:
        50%;

    left:
        50%;

    max-width:
        min(86vw, 440px);

    margin:
        0;

    padding:
        10px 14px;

    border:
        1px solid
        rgba(255,255,255,.14);

    border-radius:
        10px;

    background:
        rgba(7,9,12,.88);

    color:
        #f7f5f0;

    font-size:
        13px;

    line-height:
        1.4;

    text-align:
        center;

    pointer-events:
        none;

    transform:
        translate(-50%, -50%);
}


.belva-viewer__status:empty {
    display:
        none;
}


.belva-viewer__image {
    display:
        block;

    width:
        auto;

    height:
        auto;

    max-width:
        100%;

    max-height:
        100%;

    border-radius:
        7px;

    object-fit:
        contain;

    box-shadow:
        0 30px 110px
        rgba(0,0,0,.50);

    cursor:
        zoom-in;

    transform-origin:
        center;

    will-change:
        transform;

    transition:
        opacity .16s ease;
}


.belva-viewer.is-loading
.belva-viewer__image {
    opacity:
        .28;
}


.belva-viewer.has-image-error
.belva-viewer__image {
    opacity:
        0;
}


.belva-viewer__image.is-zoomed {
    cursor:
        grab;
}


.belva-viewer__image.is-dragging {
    cursor:
        grabbing;
}


.belva-viewer__nav {
    position:
        absolute;

    z-index:
        10;

    top:
        50%;

    width:
        48px;

    height:
        64px;

    border:
        1px solid
        rgba(255,255,255,.11);

    border-radius:
        13px;

    background:
        rgba(5,8,11,.72);

    color:
        #fff;

    font:
        inherit;

    font-size:
        27px;

    cursor:
        pointer;

    transform:
        translateY(-50%);

    backdrop-filter:
        blur(12px);
}


.belva-viewer__prev {
    left:
        14px;
}


.belva-viewer__next {
    right:
        14px;
}


.belva-viewer__bottom {
    position:
        relative;

    z-index:
        20;

    display:
        grid;

    grid-template-columns:
        minmax(0,1fr)
        auto;

    align-items:
        center;

    gap:
        14px;

    min-height:
        80px;

    padding:
        9px
        16px
        max(
            9px,
            env(safe-area-inset-bottom)
        );

    border-top:
        1px solid
        rgba(255,255,255,.075);

    background:
        rgba(7,9,12,.91);

    backdrop-filter:
        blur(18px);
}


.belva-viewer__caption {
    min-width:
        0;

    overflow:
        hidden;

    color:
        #c2c8cf;

    font-size:
        11px;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.belva-viewer__thumbs {
    display:
        flex;

    gap:
        5px;

    max-width:
        60vw;

    overflow-x:
        auto;

    scrollbar-width:
        thin;
}


.belva-viewer__thumb {
    flex:
        0 0 50px;

    width:
        50px;

    height:
        50px;

    padding:
        0;

    overflow:
        hidden;

    border:
        1px solid
        rgba(255,255,255,.10);

    border-radius:
        8px;

    background:
        #111;

    cursor:
        pointer;

    opacity:
        .60;
}


.belva-viewer__thumb img {
    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;
}


.belva-viewer__thumb.is-active {
    border-color:
        #e1ad5e;

    opacity:
        1;
}


@media (max-width: 920px) {

    .belva-project-page .gallery,
    .belva-project-page .belva-gallery-host {
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            ) !important;
    }


    .belva-project-page
    .gallery > a:first-child,
    .belva-project-page
    .belva-gallery-item.is-featured {
        grid-column:
            span 2;

        grid-row:
            span 1;
    }


    .belva-viewer__media {
        padding:
            14px 62px;
    }
}


@media (max-width: 680px) {

    .belva-project-meta {
        width:
            calc(100% - 24px);

        margin-bottom:
            26px;
    }


    .belva-gallery-heading {
        display:
            block;

        width:
            calc(100% - 24px);

        margin-bottom:
            14px;
    }


    .belva-gallery-heading__count {
        display:
            inline-flex;

        margin-top:
            9px;
    }


    .belva-project-page .gallery,
    .belva-project-page .belva-gallery-host {
        width:
            calc(100% - 18px) !important;

        gap:
            7px !important;

        margin-bottom:
            42px !important;
    }


    .belva-project-page .gallery > a,
    .belva-project-page
    .belva-gallery-item {
        border-radius:
            10px !important;
    }


    .belva-project-page
    .gallery > a:first-child img,
    .belva-project-page
    .belva-gallery-item.is-featured img {
        min-height:
            0 !important;

        aspect-ratio:
            16 / 10;
    }


    .belva-project-page
    .gallery > a::after,
    .belva-project-page
    .belva-gallery-item::after {
        display:
            none;
    }


    .belva-viewer__top {
        min-height:
            58px;

        padding-left:
            9px;

        padding-right:
            9px;
    }


    .belva-viewer__fullscreen,
    .belva-viewer__zoom {
        display:
            none;
    }


    .belva-viewer__media {
        padding:
            8px 7px 56px;
    }


    .belva-viewer__nav {
        top:
            auto;

        bottom:
            7px;

        width:
            44px;

        height:
            44px;

        border-radius:
            9px;

        font-size:
            21px;

        transform:
            none;
    }


    .belva-viewer__prev {
        left:
            8px;
    }


    .belva-viewer__next {
        right:
            8px;
    }


    .belva-viewer__bottom {
        min-height:
            58px;

        grid-template-columns:
            1fr;

        padding:
            8px
            10px
            max(
                8px,
                env(safe-area-inset-bottom)
            );
    }


    .belva-viewer__thumbs {
        display:
            none;
    }


    .belva-viewer__caption {
        white-space:
            normal;
    }
}


@media (prefers-reduced-motion: reduce) {

    .belva-viewer,
    .belva-viewer__image,
    .belva-project-page .gallery > a,
    .belva-project-page .gallery > a img {
        transition:
            none !important;
    }
}