/* ==========================================================================
   Hall of Fame (home): a centre-stage "spotlight" carousel, one student per card.
   hall-of-fame.js writes --hof-d (0 = centred, 1 = neighbour, 2 = further out) on every card while the
   strip scrolls; scale, opacity, a subtle blur and the glow are all derived from it here, so the script never
   touches layout. Without the script every card stays sharp and the strip is a plain scroll-snap row.
   The public Gallery grid further down reuses the simpler .hof-card.
   ========================================================================== */
.modern-gallery-section {
    position: relative;
    overflow: hidden;
    padding: clamp(56px, 7vw, 104px) 0;
    background: #fff;
}

.gallery-heading {
    font-size: clamp(1.9rem, 1.2rem + 2vw, 2.75rem);
    color: #09212b;
    margin: 0;
    letter-spacing: -0.5px;
    line-height: 1.15;
    text-transform: capitalize;
}

/* --- Section: off-white with a faint dotted grid and a sky glow behind the stage --- */
.hof {
    isolation: isolate;
    background: #f6f9fc;
}

.hof::before,
.hof::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.hof::before {
    background-image: radial-gradient(rgba(9, 33, 43, 0.11) 1px, transparent 1.5px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(ellipse 62% 58% at 50% 58%, #000 0%, rgba(0, 0, 0, 0.35) 55%, transparent 80%);
    mask-image: radial-gradient(ellipse 62% 58% at 50% 58%, #000 0%, rgba(0, 0, 0, 0.35) 55%, transparent 80%);
}

.hof::after {
    background: radial-gradient(36% 46% at 50% 60%, rgba(51, 189, 255, 0.14) 0%, rgba(51, 189, 255, 0) 72%);
}

.hof__head {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
}

.hof__lead {
    margin: 12px 0 0;
    color: #5b6670;
    font-size: 1.05rem;
    line-height: 1.6;
}

/* --- Empty state: no published photos yet, the section still shows -------------- */
.hof__empty {
    max-width: 560px;
    margin: clamp(28px, 4vw, 44px) auto clamp(24px, 3vw, 36px);
    padding: clamp(28px, 4vw, 40px) clamp(20px, 4vw, 36px);
    border: 1px dashed rgba(9, 33, 43, 0.18);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.78);
    text-align: center;
}

.hof__empty-icon {
    display: inline-grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin-bottom: 14px;
    border-radius: 999px;
    background: rgba(51, 189, 255, 0.12);
    color: #33BDFF;
    font-size: 2rem;
}

.hof__empty-title {
    margin: 0 0 6px;
    color: #09212b;
    font-size: 1.15rem;
    font-weight: 700;
}

.hof__empty-text {
    margin: 0;
    color: #5b6670;
    line-height: 1.6;
}

/* --- Stage + strip ---------------------------------------------------------- */
.hof__stage {
    position: relative;
    margin-top: clamp(4px, 1vw, 12px);
}

.hof__strip {
    --hof-card: clamp(250px, 24vw, 360px);
    --hof-gap: clamp(14px, 1.5vw, 24px);
    --hof-blur-unit: 1px;
    --hof-edge: 7%;
    position: relative;
    display: flex;
    gap: var(--hof-gap);
    margin: 0;
    padding: 44px calc(50% - var(--hof-card) / 2) 48px;
    list-style: none;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--hof-edge), #000 calc(100% - var(--hof-edge)), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 var(--hof-edge), #000 calc(100% - var(--hof-edge)), transparent 100%);
    cursor: grab;
}

.hof__strip::-webkit-scrollbar {
    display: none;
}

.hof__strip.is-dragging {
    scroll-snap-type: none;
    cursor: grabbing;
    user-select: none;
}

.hof__strip.is-dragging .hof-spot__link {
    pointer-events: none;
}

/* --- One spotlight card ------------------------------------------------------- */
.hof-spot {
    --hof-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --hof-near: min(var(--hof-d, 0), 1);
    --hof-far: max(var(--hof-d, 0) - 1, 0);
    position: relative;
    flex: 0 0 var(--hof-card);
    min-width: 0;
    margin: 0;
    scroll-snap-align: center;
    transform: scale(calc(1 - 0.08 * var(--hof-near) - 0.06 * var(--hof-far)));
    opacity: calc(1 - 0.25 * var(--hof-near) - 0.2 * var(--hof-far));
    filter: blur(calc((1.6 * var(--hof-near) + 1.6 * var(--hof-far)) * var(--hof-blur-unit)));
}

.hof__strip.is-moving .hof-spot {
    will-change: transform, filter, opacity;
}

/* The spotlight: a soft sky glow behind the centred card, fading out as it leaves the centre. */
.hof-spot::before {
    content: "";
    position: absolute;
    inset: -9% -24%;
    z-index: -1;
    background: radial-gradient(closest-side, rgba(51, 189, 255, 0.18) 0%, rgba(51, 189, 255, 0.08) 55%, rgba(51, 189, 255, 0) 100%);
    opacity: calc(1 - var(--hof-near));
    pointer-events: none;
}

.hof-spot__link {
    display: block;
    border-radius: 20px;
    color: #fff;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

.hof-spot__link:hover,
.hof-spot__link:focus-visible {
    color: #fff;
}

.hof-spot__link:focus-visible {
    outline: 3px solid #33BDFF;
    outline-offset: 4px;
}

.hof-spot__frame {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    isolation: isolate;
    border-radius: 20px;
    background: #dfe8ef;
    box-shadow: 0 22px 44px -18px rgba(9, 33, 43, 0.34), 0 2px 6px rgba(9, 33, 43, 0.06);
}

/* 1px light hairline over the photo edge. */
.hof-spot__frame::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.32);
    pointer-events: none;
}

.hof-spot__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    transform: scale(1.001);
    transition: transform 0.9s var(--hof-ease);
}

.hof-spot.is-focus .hof-spot__img {
    transform: scale(1.03);
}

/*
 * Name plate: a frosted band. Focused (or hovered) it is fully open: eyebrow + name. Elsewhere it folds down to
 * the name alone: the glass slides down by --hof-fold and the eyebrow fades out (transform + opacity only).
 */
.hof-spot__plate {
    --hof-fold: 22px;
    position: absolute;
    inset: auto 0 0 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 30px 20px 18px;
    isolation: isolate;
}

.hof-spot__glass {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to bottom, rgba(9, 33, 43, 0) 0%, rgba(9, 33, 43, 0.3) 42%, rgba(9, 33, 43, 0.55) 100%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 28px);
    mask-image: linear-gradient(to bottom, transparent 0, #000 28px);
    transform: translateY(var(--hof-fold));
    transition: transform 0.42s var(--hof-ease);
}

.hof-spot__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #a9e5ff;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 1.6px;
    line-height: 1.2;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.42s var(--hof-ease), transform 0.42s var(--hof-ease);
}

.hof-spot__eyebrow i {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(51, 189, 255, 0.22);
    color: #7fd6ff;
    font-size: 0.78rem;
}

.hof-spot__name {
    display: block;
    overflow: hidden;
    color: #fff;
    font-family: "DM Serif Display", serif;
    font-size: clamp(1.15rem, 0.9rem + 0.6vw, 1.45rem);
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-shadow: 0 1px 14px rgba(9, 33, 43, 0.4);
}

.hof-spot.is-focus .hof-spot__plate,
.hof-spot__link:hover .hof-spot__plate,
.hof-spot__link:focus-visible .hof-spot__plate,
.hof-spot__plate--bare {
    --hof-fold: 0px;
}

.hof-spot.is-focus .hof-spot__eyebrow,
.hof-spot__link:hover .hof-spot__eyebrow,
.hof-spot__link:focus-visible .hof-spot__eyebrow,
.hof-spot__plate--bare .hof-spot__eyebrow {
    opacity: 1;
    transform: none;
}

/* --- Controls: progress dots + "x / N", arrows and See More -------------------- */
.hof__controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 18px 24px;
}

.hof__controls > .hof__progress {
    grid-column: 2;
}

.hof__controls > .hof__actions {
    grid-column: 3;
    justify-self: end;
}

/* Empty state: only the "See More" link, centred under the message. */
.hof__controls--centered {
    display: flex;
    justify-content: center;
}

.hof__progress {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 16px;
}

.hof__progress[hidden] {
    display: none;
}

.hof__dots {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.hof__dot {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 24px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.hof__dot::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: rgba(9, 33, 43, 0.2);
    transition: width 0.42s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.42s ease;
}

.hof__dot:hover::before {
    background: rgba(9, 33, 43, 0.4);
}

.hof__dot[aria-current="true"] {
    width: 34px;
}

/* Many photos (more than 12): tighter dots so the row still fits on a phone. */
.hof__dots--dense .hof__dot {
    width: 14px;
}

.hof__dots--dense .hof__dot::before {
    width: 6px;
    height: 6px;
}

.hof__dots--dense .hof__dot[aria-current="true"] {
    width: 28px;
}

.hof__dots--dense .hof__dot[aria-current="true"]::before {
    width: 20px;
}

.hof__dot[aria-current="true"]::before {
    width: 24px;
    background: #33BDFF;
}

.hof__dot:focus-visible {
    outline: 2px solid #33BDFF;
    outline-offset: 1px;
    border-radius: 6px;
}

.hof__count {
    margin: 0;
    color: #6b7680;
    font-size: 0.88rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.5px;
}

.hof__count span {
    color: #09212b;
    font-weight: 700;
}

.hof__actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.hof__nav {
    display: flex;
    gap: 10px;
}

.hof__nav[hidden] {
    display: none;
}

.hof__more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border: 1px solid rgba(9, 33, 43, 0.16);
    border-radius: 999px;
    background: #fff;
    color: #09212b;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.hof__more i {
    font-size: 1.15rem;
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.hof__more:hover,
.hof__more:focus-visible {
    background: #09212b;
    border-color: #09212b;
    color: #fff;
}

.hof__more:hover i {
    transform: translateX(3px);
}

.hof__btn {
    display: inline-grid;
    place-items: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid rgba(9, 33, 43, 0.12);
    border-radius: 50%;
    background: #fff;
    color: #09212b;
    font-size: 1.5rem;
    box-shadow: 0 6px 18px rgba(9, 33, 43, 0.08);
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, opacity 0.3s ease, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.hof__btn:hover:not(:disabled),
.hof__btn:focus-visible {
    background: #09212b;
    color: #fff;
}

.hof__btn:active:not(:disabled) {
    transform: scale(0.94);
}

.hof__btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.hof__btn:focus-visible,
.hof__more:focus-visible {
    outline: 3px solid #33BDFF;
    outline-offset: 2px;
}

/* --- Tablets and phones: progress on its own centred row, actions below ---------- */
@media (max-width: 991.98px) {
    .hof__controls {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
    }

    .hof__controls > .hof__progress,
    .hof__controls > .hof__actions {
        grid-column: 1;
        justify-self: center;
    }
}

/* --- Phones: one card centred, neighbours peeking, lighter effects, swipe + dots --- */
@media (max-width: 767.98px) {
    .hof__strip {
        --hof-card: 78vw;
        --hof-gap: 12px;
        --hof-blur-unit: 0.6px;
        --hof-edge: 3%;
        padding-top: 30px;
        padding-bottom: 34px;
    }

    .hof-spot::before {
        inset: -6% -14%;
    }

    .hof-spot__plate {
        padding: 26px 16px 15px;
    }

    .hof__nav,
    .hof__nav[hidden] {
        display: none;
    }
}

/* Reduced motion: a plain, sharp strip without scaling, blur or animated plates. */
@media (prefers-reduced-motion: reduce) {
    .hof-spot {
        transform: none;
        opacity: 1;
        filter: none;
    }

    .hof-spot::before {
        opacity: 0;
    }

    .hof-spot__img,
    .hof-spot__glass,
    .hof-spot__eyebrow,
    .hof__dot::before {
        transition: none;
    }

    .hof-spot.is-focus .hof-spot__img {
        transform: none;
    }
}

/* --- Gallery card (public /gallery grid) ------------------------------------ */
.hof-card {
    --hof-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --hof-mist-rest: 64px;
    position: relative;
    min-width: 0;
    margin: 0;
}

.hof-card__link {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    isolation: isolate;
    border-radius: 18px;
    background: #dfe8ef;
    box-shadow: 0 8px 20px rgba(9, 33, 43, 0.09);
    color: #fff;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transform: translateZ(0);
    transition: box-shadow 0.42s var(--hof-ease);
}

.hof-card__link:hover,
.hof-card__link:focus-visible {
    color: #fff;
    box-shadow: 0 12px 26px rgba(9, 33, 43, 0.16);
}

.hof-card__link:focus-visible {
    outline: 3px solid #33BDFF;
    outline-offset: 3px;
}

.hof-card__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    transform: scale(1.001);
    transition: transform 0.9s var(--hof-ease);
    will-change: transform;
}

.hof-card__link:hover .hof-card__img,
.hof-card__link:focus-visible .hof-card__img {
    transform: scale(1.03);
}

/*
 * The mist band is taller than it looks: at rest it is pushed down so only its top --hof-mist-rest pixels show;
 * on hover it slides up (transform only) to reveal the extra line. A second, blurrier layer fades in on top.
 */
.hof-card__mist {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 3px;
    min-height: calc(var(--hof-mist-rest) + 44px);
    padding: 22px 18px 16px;
    background: linear-gradient(to bottom, rgba(9, 33, 43, 0) 0%, rgba(9, 33, 43, 0.38) 38%, rgba(9, 33, 43, 0.6) 100%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22px);
    mask-image: linear-gradient(to bottom, transparent 0, #000 22px);
    transform: translateY(44px);
    transition: transform 0.42s var(--hof-ease);
}

.hof-card__mist::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    -webkit-backdrop-filter: blur(22px) saturate(150%);
    backdrop-filter: blur(22px) saturate(150%);
    background: rgba(9, 33, 43, 0.12);
    opacity: 0;
    transition: opacity 0.42s var(--hof-ease);
}

.hof-card__link:hover .hof-card__mist,
.hof-card__link:focus-visible .hof-card__mist {
    transform: translateY(0);
}

.hof-card__link:hover .hof-card__mist::before,
.hof-card__link:focus-visible .hof-card__mist::before {
    opacity: 1;
}

.hof-card__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #8fdcff;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 1.4px;
    line-height: 1.2;
    text-transform: uppercase;
}

.hof-card__eyebrow i {
    color: #33BDFF;
    font-size: 0.9rem;
}

.hof-card__name {
    display: block;
    overflow: hidden;
    color: #fff;
    font-family: "DM Serif Display", serif;
    font-size: 1.18rem;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-shadow: 0 1px 12px rgba(9, 33, 43, 0.35);
}

.hof-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.82rem;
    font-weight: 500;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.42s var(--hof-ease), transform 0.42s var(--hof-ease);
}

.hof-card__link:hover .hof-card__cta,
.hof-card__link:focus-visible .hof-card__cta {
    opacity: 1;
    transform: translateY(0);
}

/* Touch screens have no hover: show the name band fully, without the extra line. */
@media (hover: none) {
    .hof-card__mist {
        min-height: var(--hof-mist-rest);
        transform: none;
    }

    .hof-card__cta {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hof-card__img,
    .hof-card__mist,
    .hof-card__mist::before,
    .hof-card__cta,
    .hof-card__link {
        transition: none;
    }

    .hof-card__link:hover .hof-card__img,
    .hof-card__link:focus-visible .hof-card__img {
        transform: none;
    }
}

/* ==========================================================================
   Public /gallery page: uniform grid of the same cards + lightbox
   ========================================================================== */
.gallery-page {
    padding: clamp(56px, 7vw, 104px) 0;
    background:
        radial-gradient(55% 45% at 90% 0%, rgba(51, 189, 255, 0.1) 0%, rgba(51, 189, 255, 0) 70%),
        #f6f9fc;
}

.gallery-page__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(12px, 2vw, 24px);
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 768px) {
    .gallery-page__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .gallery-page__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.gallery-page__grid .hof-card__link {
    cursor: zoom-in;
}

@media (max-width: 575.98px) {
    .gallery-page__grid .hof-card {
        --hof-mist-rest: 54px;
    }

    .gallery-page__grid .hof-card__mist {
        padding: 18px 12px 12px;
    }

    .gallery-page__grid .hof-card__name {
        font-size: 1rem;
    }
}

.gallery-page__empty {
    position: relative;
    max-width: 560px;
    margin: 0 auto;
    padding: clamp(40px, 5vw, 60px) clamp(24px, 4vw, 48px);
    overflow: hidden;
    border: 1px solid rgba(9, 33, 43, 0.07);
    border-radius: 20px;
    background:
        radial-gradient(60% 70% at 50% 0%, rgba(51, 189, 255, 0.1) 0%, rgba(51, 189, 255, 0) 70%),
        #fff;
    box-shadow: 0 10px 30px rgba(9, 33, 43, 0.06);
    text-align: center;
}

.gallery-page__empty-icon {
    display: inline-grid;
    place-items: center;
    width: 72px;
    height: 72px;
    margin-bottom: 20px;
    border-radius: 50%;
    background: rgba(51, 189, 255, 0.12);
    box-shadow: 0 0 0 10px rgba(51, 189, 255, 0.05), inset 0 0 0 1px rgba(51, 189, 255, 0.2);
    color: #009ce3;
    font-size: 2rem;
}

.gallery-page__empty-text {
    max-width: 380px;
    margin: 0 auto;
    color: #09212b;
    font-family: "DM Serif Display", serif;
    font-size: clamp(1.25rem, 1rem + 0.8vw, 1.6rem);
    line-height: 1.35;
}

.gallery-page__pages .pagination {
    gap: 6px;
}

.gallery-page__pages .page-link {
    min-width: 42px;
    border-radius: 999px !important;
    border-color: rgba(9, 33, 43, 0.12);
    color: #09212b;
    text-align: center;
}

.gallery-page__pages .page-item.active .page-link {
    background: #09212b;
    border-color: #09212b;
    color: #fff;
}

.vd-lightbox {
    width: 100%;
    max-width: 100vw;
    height: 100%;
    max-height: 100vh;
    padding: 0;
    border: 0;
    background: transparent;
}

.vd-lightbox::backdrop {
    background: rgba(6, 20, 27, 0.9);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.vd-lightbox__body {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 3rem 4.5rem;
    box-sizing: border-box;
}

.vd-lightbox__img {
    max-width: 100%;
    max-height: calc(100% - 3.5rem);
    object-fit: contain;
    border-radius: 14px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
}

.vd-lightbox__caption {
    min-height: 1.5rem;
    margin: 1rem 0 0;
    color: #fff;
    font-family: "DM Serif Display", serif;
    font-size: 1.25rem;
    text-align: center;
}

.vd-lightbox__btn {
    position: absolute;
    display: inline-grid;
    place-items: center;
    width: 2.9rem;
    height: 2.9rem;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transition: background-color 0.25s ease;
}

.vd-lightbox__btn:hover,
.vd-lightbox__btn:focus-visible {
    background: rgba(255, 255, 255, 0.3);
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.vd-lightbox__close {
    top: 1rem;
    right: 1rem;
}

.vd-lightbox__prev {
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
}

.vd-lightbox__next {
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
}

@media (max-width: 575.98px) {
    .vd-lightbox__body {
        padding: 3.5rem 1rem 5rem;
    }

    .vd-lightbox__prev,
    .vd-lightbox__next {
        top: auto;
        bottom: 1rem;
        transform: none;
    }
}