/* =====================================================
   WHAT IS
===================================================== */

.what-is{

    background:#fff;

    padding:80px 0;

    overflow:hidden;

}

.what-is .container{

    width:min(var(--container),92%);

    margin:auto;

}

.what-is__layout{

    display:grid;

    grid-template-columns:minmax(280px,4fr) minmax(0,6fr);

    align-items:stretch;

    gap:var(--space-9);

}

.what-is__media{

    width:100%;

    display:flex;

    min-height:0;

}

.what-is__image-frame{

    --frame-inset-x:calc(var(--space-6) / 2);
    --frame-inset-y:calc(var(--space-7) / 2);

    position:relative;

    width:100%;

    height:100%;

    min-height:0;

    border-radius:8px;

    overflow:hidden;

}

.what-is__image-frame img{

    position:absolute;

    inset:0;

    z-index:1;

    width:100%;

    height:100%;

    object-fit:cover;

}

.what-is__image-frame .frame{

    z-index:2;

    opacity:1;

}

.what-is__content{

    max-width:740px;

}

.what-is__eyebrow{

    font-size:13px;

    font-weight:600;

    line-height:1.4;

    letter-spacing:.12em;

    color:var(--sage);

    text-transform:uppercase;

    margin-bottom:var(--space-2);

}

.what-is__title{

    font-family:var(--font-heading);

    font-size:42px;

    font-weight:600;

    line-height:1.16;

    color:var(--graphite);

    margin-bottom:var(--space-3);

}

.what-is__lead{

    max-width:680px;

    font-size:20px;

    line-height:1.7;

    color:var(--graphite);

    margin-bottom:var(--space-4);

}

.what-is__text{

    max-width:720px;

    font-size:16px;

    line-height:1.85;

    color:var(--graphite-600);

}

@keyframes whatIsMediaReveal{

    from{

        opacity:0;

        transform:translateX(-24px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

@keyframes whatIsContentReveal{

    from{

        opacity:0;

        transform:translateY(24px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@supports (animation-timeline:view()){

    .what-is__media{

        animation:whatIsMediaReveal .5s ease-out both;

        animation-timeline:view();

        animation-range:entry 8% cover 34%;

    }

    .what-is__content{

        animation:whatIsContentReveal .5s ease-out both;

        animation-timeline:view();

        animation-range:entry 12% cover 38%;

    }

}

@media (max-width:1024px){

    .what-is{

        padding:72px 0;

    }

    .what-is__layout{

        grid-template-columns:1fr;

        gap:var(--space-6);

    }

    .what-is__media{

        max-width:520px;

        display:block;

    }

    .what-is__image-frame{

        height:auto;

        aspect-ratio:4 / 5;

    }

    .what-is__title{

        font-size:34px;

    }

    .what-is__lead{

        font-size:18px;

    }

}

@media (max-width:720px){

    .what-is{

        padding:64px 0;

    }

    .what-is__layout{

        gap:var(--space-5);

    }

    .what-is__title{

        font-size:30px;

    }

    .what-is__lead{

        font-size:17px;

        line-height:1.65;

    }

    .what-is__text{

        font-size:15px;

        line-height:1.75;

    }

}