/*==================================================
04 GALLERY
==================================================*/

.cl-gallery{

    background:transparent;

    padding:35px 0;

    overflow:hidden;

}

/*==============================
Header
==============================*/

.cl-gallery-head{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:20px;

    margin-bottom:18px;

}

.cl-gallery-heading{

    flex:1;

    min-width:0;

}

.cl-gallery-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 22px;

    background:#ffe9ee;

    color:var(--cl-primary);

    border-radius:999px;

    font-size:15px;

    font-weight:700;

    margin-bottom:18px;

}

.cl-gallery-title{

    font-size:42px;

    line-height:1.2;

    font-weight:800;

    color:var(--cl-text);

    margin-bottom:14px;

}

.cl-gallery-subtitle{

    max-width:760px;

    font-size:17px;

    line-height:1.7;

    color:var(--cl-muted);

}

/*==============================
Navigation
==============================*/

.cl-gallery-nav{

    display:flex;

    gap:12px;

}

.cl-gallery-nav button{

    width:52px;

    height:52px;

    border:none;

    border-radius:50%;

    background:var(--cl-primary);

    color:#fff;

    font-size:22px;

    cursor:pointer;

    transition:.30s;

}

.cl-gallery-nav button:hover{

    background:var(--cl-primary-hover);

}

/*==============================
Slider
==============================*/

.cl-gallery-slider{

    position:relative;

    width:100%;

}

.splide__track{

    overflow:hidden;

}

.splide__list{

    align-items:stretch;

}

.splide__slide{

    height:auto;

    padding:8px;

    box-sizing:border-box;

}

.splide__slide .cl-gallery-card{

    height:100%;

}

.splide__arrows{

    display:none;

}

.splide__pagination{

    display:none;

}

.splide{

    visibility:visible;

}

.cl-gallery-card{

    cursor:pointer;

}

/*==============================
Desktop
==============================*/


/*==============================
Card
==============================*/

.cl-gallery-card{

    background:#fff;

    border-radius:20px;

    overflow:hidden;

    border:1px solid #f0f0f0;

    box-shadow:0 8px 24px rgba(16,24,40,.08);

    transition:.35s ease;

    height:100%;

}

.cl-gallery-card:hover{

    transform:translateY(-8px);

    box-shadow:0 18px 45px rgba(16,24,40,.12);

}

.cl-gallery-image{

    overflow:hidden;

}

.cl-gallery-image img{

    width:100%;

    aspect-ratio:1/1.15;

    object-fit:cover;

    display:block;

}

.cl-gallery-card:hover img{

    transform:scale(1.05);

}

.cl-gallery-content{

    padding:16px;

    text-align:center;

}

.cl-gallery-content h3{

    font-size:22px;

    font-weight:700;

    line-height:1.3;

    color:var(--cl-text);

    text-align:center;

    margin:0 0 6px;

}

.cl-gallery-content p{

    font-size:15px;

    line-height:1.5;

    color:var(--cl-muted);

    text-align:center;

    margin:0;

}

/*==============================
Tablet
==============================*/

@media(max-width:991px){

    .cl-gallery{

    padding:25px 0;

}

    .cl-gallery-head{

        flex-direction:column;

        align-items:flex-start;

    }


}

/*==============================
Mobile
==============================*/

@media(max-width:767px){

    .cl-gallery{

    padding:15px 0;

}

    .cl-gallery-title{

        font-size:28px;

    }

    .cl-gallery-subtitle{

        font-size:16px;

    }

    .cl-gallery-head{

    gap:14px;

    margin-bottom:18px;

}

.cl-gallery-nav{

    width:100%;

    justify-content:flex-start;

    margin-top:0;

}

    .cl-gallery-nav button{

        width:42px;

        height:42px;

        font-size:18px;

    }


    .cl-gallery-content{

    padding:12px 14px 14px;

}

    .cl-gallery-content h3{

        font-size:18px;

    }

    .cl-gallery-content p{

        font-size:14px;

    }

    .cl-gallery-card{

    border-radius:18px;

}

.cl-gallery-image img{

    border-radius:18px 18px 0 0;

}

}