/*==================================================
  GALLERY
  Zen Spa Home
==================================================*/

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

.gallery{

    position:relative;

    background:var(--color-surface);

    overflow:hidden;

}

.gallery .section-header{

    margin-bottom:90px;

}

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

.gallery-grid{

    display:grid;

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

    gap:1.5rem;

}

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

.gallery-item{

    position:relative;

    overflow:hidden;

    border-radius:28px;

    cursor:pointer;

    background:#111;

}

.gallery-item img{

    display:block;

    width:100%;

    height:100%;

    object-fit:cover;

    transition:

        transform 1.1s cubic-bezier(.22,.61,.36,1),

        filter .45s ease;

}

/*==============================================
  LAYOUT
==============================================*/

.gallery-item{

    grid-column:span 4;

    aspect-ratio:1/1;

}

.gallery-large{

    grid-column:span 8;

    aspect-ratio:16/9;

}

.gallery-wide{

    grid-column:span 12;

    aspect-ratio:21/9;

}

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

.gallery-item::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            to top,

            rgba(0,0,0,.45),

            rgba(0,0,0,0)

        );

    opacity:0;

    transition:opacity .45s ease;

    z-index:1;

}

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

.gallery-item::after{

    content:"+";

    position:absolute;

    top:50%;
    left:50%;

    transform:translate(-50%,-50%) scale(.8);

    width:70px;

    height:70px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

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

    backdrop-filter:blur(10px);

    -webkit-backdrop-filter:blur(10px);

    color:#fff;

    font-size:2rem;

    opacity:0;

    transition:

        opacity .35s ease,

        transform .45s ease;

    z-index:2;

}

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

.gallery-item:hover img{

    transform:scale(1.08);

}

.gallery-item:hover::before{

    opacity:1;

}

.gallery-item:hover::after{

    opacity:1;

    transform:translate(-50%,-50%) scale(1);

}

/*==============================================
  SHADOW
==============================================*/

.gallery-item{

    transition:

        transform .45s ease,

        box-shadow .45s ease;

}

.gallery-item:hover{

    transform:translateY(-8px);

    box-shadow:

        0 25px 60px rgba(0,0,0,.25);

}

/*==============================================
  DECORATION
==============================================*/

.gallery::before{

    content:"";

    position:absolute;

    left:-250px;

    bottom:-250px;

    width:500px;

    height:500px;

    border-radius:50%;

    background:

        radial-gradient(

            circle,

            rgba(185,145,93,.08),

            transparent 70%

        );

    pointer-events:none;

}

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

@media (max-width:992px){

    .gallery-grid{

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

    }

    .gallery-item,

    .gallery-large,

    .gallery-wide{

        grid-column:auto;

        aspect-ratio:4/3;

    }

}

@media (max-width:768px){

    .gallery-grid{

        grid-template-columns:1fr;

        gap:1.25rem;

    }

    .gallery-item,

    .gallery-large,

    .gallery-wide{

        aspect-ratio:4/3;

    }

    .gallery-item{

        border-radius:22px;

    }

}