/*
==========================================================================

 PROJECT     : SIGNATURE SPREADS AND TREATS BY DI
 VERSION     : 1.0.0
 AUTHOR      : JB

===========================================================================
*/

/* SMALL LAPTOPS */

@media (max-width: 1199.98px) {

    .gallery-page .gallery-grid {
        gap:
            clamp(2.4rem, 3.5vw, 3.3rem)
            clamp(1.5rem, 2vw, 2rem);
    }
}


/* TABLETS */

@media (max-width: 991.98px) {

    .gallery-page .site-hero-media img {
        object-position: 68% center;
    }

    .gallery-page .gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        max-width: 820px;
    }

    .gallery-page .gallery-photo-frame {
        border-width: 7px;
    }

    .gallery-page .gallery-lightbox-stage {
        width: min(100%, 900px);
        height: min(78vh, 780px);
    }
}


/* MOBILE */

@media (max-width: 575.98px) {

    .gallery-page .site-hero-media img {
        object-position: 72% center;
    }

    .gallery-page .gallery-intro {
        padding:
            var(--space-4xl)
            0
            var(--space-2xl);
    }

    .gallery-page .gallery-intro-header h2 {
        font-size: clamp(2.7rem, 12vw, 3.9rem);
    }

    .gallery-page .gallery-collection {
        padding:
            var(--space-xl)
            0
            var(--space-4xl);
    }

    .gallery-page .gallery-grid {
        grid-template-columns: 1fr;
        gap: clamp(2.7rem, 10vw, 3.8rem);
        max-width: 520px;
    }

    .gallery-page .gallery-photo,
    .gallery-page .gallery-photo-tilt-left,
    .gallery-page .gallery-photo-tilt-right {
        transform: none;
    }

    .gallery-page .gallery-photo-frame {
        border-width: 6px;
    }

    .gallery-page .gallery-photo-expand {
        width: 40px;
        height: 40px;
        opacity: 1;
        transform: none;
    }

    .gallery-page .gallery-closing-thought {
        margin-top: var(--space-4xl);
    }

    .gallery-page .gallery-lightbox {
        padding:
            4.5rem
            var(--space-md)
            4rem;
    }

    .gallery-page .gallery-lightbox-stage {
        width: 100%;
        height: 72vh;
    }

    .gallery-page .gallery-lightbox-nav {
        top: auto;
        bottom: 1rem;
        width: 44px;
        height: 44px;
        transform: none;
    }

    .gallery-page .gallery-lightbox-prev {
        left: calc(50% - 58px);
    }

    .gallery-page .gallery-lightbox-next {
        right: calc(50% - 58px);
    }

    .gallery-page .gallery-lightbox-counter {
        bottom: 1.85rem;
    }
}


/* SMALL MOBILE */

@media (max-width: 374.98px) {

    .gallery-page .gallery-intro-header h2 {
        font-size: 2.5rem;
    }

    .gallery-page .gallery-lightbox-close {
        width: 44px;
        height: 44px;
    }
}