/* ==========================================
   GALLERY SECTION
========================================== */

.gallery{

    padding:120px 0;

    background:#f8fafc;

}


/* ==========================================
   GALLERY GRID
========================================== */

.gallery-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    grid-auto-rows:240px;

    gap:22px;

}


/* ==========================================
   LARGE ITEMS
========================================== */

.gallery-item.gallery-tall{

    grid-row:span 2;

}

.gallery-item.gallery-wide{

    grid-column:span 2;

}


/* ==========================================
   GALLERY ITEM
========================================== */

.gallery-item{

    position:relative;

    overflow:hidden;

    border-radius:20px;

    cursor:pointer;

    box-shadow:0 12px 35px rgba(0,0,0,.08);

    background:#000;

}


/* ==========================================
   IMAGE
========================================== */

.gallery-item img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transition:transform .6s ease;

}


/* ==========================================
   IMAGE HOVER
========================================== */

.gallery-item:hover img{

    transform:scale(1.12);

}


/* ==========================================
   OVERLAY
========================================== */

.gallery-overlay{

    position:absolute;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(
        to top,
        rgba(15,23,42,.82),
        rgba(15,23,42,.18)
    );

    opacity:0;

    transition:.4s ease;

}

.gallery-item:hover .gallery-overlay{

    opacity:1;

}


/* ==========================================
   ICON
========================================== */

.gallery-icon{

    width:72px;

    height:72px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

    font-size:38px;

    font-weight:300;

    transform:scale(.7);

    transition:.35s ease;

    box-shadow:0 10px 30px rgba(0,0,0,.25);

}

.gallery-item:hover .gallery-icon{

    transform:scale(1);

}


/* ==========================================
   BORDER ANIMATION
========================================== */

.gallery-item::before{

    content:"";

    position:absolute;

    inset:14px;

    border:2px solid rgba(255,255,255,.55);

    border-radius:14px;

    opacity:0;

    transform:scale(.92);

    transition:.4s ease;

    z-index:2;

    pointer-events:none;

}

.gallery-item:hover::before{

    opacity:1;

    transform:scale(1);

}


/* ==========================================
   CTA
========================================== */

.gallery-footer{

    margin-top:70px;

    text-align:center;

}

/* ==========================================
   RESPONSIVE GALLERY
========================================== */


/* ==========================================
   LARGE LAPTOP
========================================== */

@media (max-width:1200px){

    .gallery-grid{

        grid-template-columns:repeat(3,1fr);

        gap:20px;

    }

    .gallery-item{

        border-radius:18px;

    }

}


/* ==========================================
   TABLET
========================================== */

@media (max-width:992px){

    .gallery{

        padding:100px 0;

    }

    .gallery-grid{

        grid-template-columns:repeat(2,1fr);

        grid-auto-rows:220px;

        gap:18px;

    }

    /* Reset custom spans */

    .gallery-item.gallery-wide{

        grid-column:span 1;

    }

    .gallery-item.gallery-tall{

        grid-row:span 2;

    }

    .gallery-footer{

        margin-top:55px;

    }

}


/* ==========================================
   MOBILE
========================================== */

@media (max-width:768px){

    .gallery{

        padding:80px 0;

    }

    .gallery-grid{

        grid-template-columns:1fr;

        grid-auto-rows:260px;

        gap:18px;

    }

    /* Remove all spanning */

    .gallery-item.gallery-wide,

    .gallery-item.gallery-tall{

        grid-column:auto;

        grid-row:auto;

    }

    .gallery-icon{

        width:60px;

        height:60px;

        font-size:32px;

    }

}


/* ==========================================
   SMALL MOBILE
========================================== */

@media (max-width:480px){

    .gallery{

        padding:70px 0;

    }

    .gallery-grid{

        gap:15px;

        grid-auto-rows:220px;

    }

    .gallery-item{

        border-radius:16px;

    }

    .gallery-icon{

        width:52px;

        height:52px;

        font-size:28px;

    }

    .gallery-footer{

        margin-top:45px;

    }

}


/* ==========================================
   IMAGE LOADING
========================================== */

.gallery-item img{

    opacity:0;

    animation:galleryFade .8s ease forwards;

}

@keyframes galleryFade{

    from{

        opacity:0;

        transform:scale(1.05);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}


/* ==========================================
   ACCESSIBILITY
========================================== */

.gallery-item:focus-within{

    outline:2px solid var(--primary);

    outline-offset:4px;

}


/* ==========================================
   REDUCE MOTION
========================================== */

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

    .gallery-item,
    .gallery-item img,
    .gallery-overlay,
    .gallery-icon{

        animation:none !important;

        transition:none !important;

    }

}