/*==================================================
  EXPERIENCE
  Zen Spa Home
==================================================*/

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

.experience{

    position:relative;

    background:var(--color-background);

    overflow:hidden;

}

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

.experience-grid{

    display:grid;

    grid-template-columns:1.05fr .95fr;

    align-items:center;

    gap:clamp(3rem,6vw,7rem);

}

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

.experience-media{

    position:relative;

    overflow:hidden;

    border-radius:32px;

    background:#111;

}

.experience-media img{

    display:block;

    width:100%;

    height:100%;

    object-fit:cover;

    transition:

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

        filter .5s ease;

}

.experience-media:hover img{

    transform:scale(1.05);

}

/*==============================================
  GLOW
==============================================*/

.experience-media::after{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            to top,

            rgba(0,0,0,.22),

            transparent 45%

        );

    pointer-events:none;

}

/*==============================================
  CONTENT
==============================================*/

.experience-content{

    max-width:620px;

}

.experience-content .section-title{

    margin-bottom:2rem;

}

.experience-content .section-description{

    margin-bottom:3rem;

}

/*==============================================
  FEATURES
==============================================*/

.experience-features{

    display:flex;

    flex-direction:column;

    gap:2rem;

    margin-bottom:3rem;

}

/*==============================================
  FEATURE
==============================================*/

.feature{

    display:flex;

    align-items:flex-start;

    gap:1.5rem;

}

.feature-number{

    flex-shrink:0;

    color:var(--color-primary);

    font-size:.82rem;

    font-weight:700;

    letter-spacing:.28em;

    text-transform:uppercase;

    margin-top:.35rem;

}

.feature h3{

    margin-bottom:.6rem;

    font-size:1.35rem;

}

.feature p{

    color:var(--color-text-light);

    line-height:1.8;

}

/*==============================================
  BUTTON
==============================================*/

.experience .btn{

    margin-top:.5rem;

}

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

.experience::before{

    content:"";

    position:absolute;

    top:-250px;

    right:-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:1100px){

    .experience-grid{

        grid-template-columns:1fr;

        gap:4rem;

    }

    .experience-content{

        max-width:100%;

    }

}

@media (max-width:768px){

    .experience-media{

        border-radius:24px;

    }

    .experience-features{

        gap:1.5rem;

    }

    .feature{

        gap:1rem;

    }

}

@media (max-width:576px){

    .feature{

        flex-direction:column;

    }

    .feature-number{

        margin-top:0;

    }

}