/*THIS IS NOT WORKING ANYWHERE*/

/*=================================
EXPERIENCE EDITORIAL
FOUNDATION
=================================*/

.ms-experience-editorial{

    display:flex;
    flex-direction:column;

    gap:clamp(2.5rem,6vw,5rem);

    width:100%;

    margin-top:clamp(3rem,5vw,5rem);

}


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

.ms-experience-feature{

    display:grid;

    grid-template-columns:1.75fr 1fr;

    background:var(--ms-white);

    overflow:hidden;

    border-radius:28px;

}


/* alternate feature */

.ms-experience-feature--secondary{

    grid-template-columns:1fr 1.75fr;

}


.ms-experience-feature--secondary
.ms-experience-feature__media{

    order:2;

}


.ms-experience-feature--secondary
.ms-experience-feature__body{

    order:1;

}


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

.ms-experience-feature__media{

    position:relative;

    overflow:hidden;

    min-height:520px;

}


.ms-experience-feature__media img{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

}


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

.ms-experience-feature__body{

    display:flex;

    flex-direction:column;

    justify-content:center;

    padding:clamp(2.5rem,5vw,4.5rem);

}


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

.ms-experience-grid{

    display:grid;

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

    gap:2rem;

}


/*=================================
PANELS
=================================*/

.ms-experience-panel{

    display:flex;

    flex-direction:column;

    overflow:hidden;

    border-radius:24px;

    background:var(--ms-white);

}


/*=================================
PANEL MEDIA
=================================*/

.ms-experience-panel__media{

    min-height:300px;

    overflow:hidden;

}


.ms-experience-panel__media img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}


/*=================================
PANEL BODY
=================================*/

.ms-experience-panel__body{

    display:flex;

    flex-direction:column;

    padding:2rem;

}









/* CATEGORY: Phase 2 — Typography */

.ms-experience-feature__category,
.ms-experience-panel__category{

    display:inline-block;

    margin-bottom:1rem;

    font-size:.72rem;

    letter-spacing:.25em;

    text-transform:uppercase;

    color:var(--ms-orange);

    font-weight:700;

}


/* TITLES */

.ms-experience-editorial > .ms-experience-feature__title{

    margin:0;

    max-width:14ch;

    font-size:clamp(2.3rem,4vw,3.6rem);

    line-height:1.08;

    color:var(--ms-green);

}


.ms-experience-editorial > .ms-experience-panel h3{

    margin:.2rem 0 1rem;

    font-size:1.7rem;

    line-height:1.2;

    color:var(--ms-green);

}


/* PARAGRAPHS */

.ms-experience-editorial > .ms-experience-feature__summary,
.ms-experience-panel p{

    margin:0;

    margin-top:1.25rem;

    line-height:1.9;

    color:var(--ms-text);

}


/* LINKS */

.ms-experience-feature__link,
.ms-experience-panel a{

    margin-top:2rem;

    width:fit-content;

    text-decoration:none;

    color:var(--ms-green);

    font-weight:600;

}







/*Phase 3 — Luxury Details

This is where it starts feeling premium.*/

.ms-experience-feature,
.ms-experience-panel{

    transition:

        transform .45s ease,

        box-shadow .45s ease;

}


.ms-experience-feature:hover,
.ms-experience-panel:hover{

    transform:translateY(-6px);

    box-shadow:0 24px 70px rgba(0,0,0,.08);

}


.ms-experience-feature img,
.ms-experience-panel img{

    transition:transform 1.2s ease;

}


.ms-experience-feature:hover img,
.ms-experience-panel:hover img{

    transform:scale(1.05);

}


.ms-experience-feature__title,
.ms-experience-panel h3{

    transition:color .3s ease;

}


.ms-experience-feature:hover .ms-experience-feature__title,
.ms-experience-panel:hover h3{

    color:var(--ms-orange);

}











/*Phase 4 — Tablet*/
@media (max-width:1100px){

    .ms-experience-feature,
    .ms-experience-feature--secondary{

        grid-template-columns:1fr;

    }

    .ms-experience-feature--secondary
    .ms-experience-feature__media,

    .ms-experience-feature--secondary
    .ms-experience-feature__body{

        order:unset;

    }

    .ms-experience-feature__media{

        min-height:420px;

    }

}
/*Phase 5 — Mobile: This is where I want to differ from most safari websites. Most simply shrink everything. I want the photography to remain dominant.*/

@media (max-width:768px){

    .ms-experience-editorial{

        gap:3rem;

    }

    .ms-experience-grid{

        grid-template-columns:1fr;

    }

    .ms-experience-feature__media{

        min-height:280px;

    }

    .ms-experience-panel__media{

        min-height:240px;

    }

    .ms-experience-feature__body{

        padding:2rem;

    }

    .ms-experience-panel__body{

        padding:1.5rem;

    }

    .ms-experience-feature__title{

        font-size:2rem;

        max-width:none;

    }

    .ms-experience-panel h3{

        font-size:1.45rem;

    }

}