.lavArticleHero{

    position:relative;
    overflow:hidden;

    padding:
        clamp(8rem,10vw,11rem)
        0
        clamp(5rem,8vw,7rem);

    background:
        linear-gradient(
            180deg,
            #fbf8fc 0%,
            #ffffff 100%
        );

    isolation:isolate;
    padding-left: 20px;
    padding-right: 20px;
}


.lavArticleHeroGlow{

    position:absolute;
    border-radius:50%;
    filter:blur(80px);
    opacity:.45;
    pointer-events:none;

}


.lavArticleHeroGlowOne{

    width:32rem;
    height:32rem;

    top:-10rem;
    left:-12rem;

    background:#d8c6f3;

}


.lavArticleHeroGlowTwo{

    width:28rem;
    height:28rem;

    right:-8rem;
    bottom:-8rem;

    background:#ccefdc;

}


.lavArticleHeroTexture{

    position:absolute;
    inset:0;

    opacity:.06;

    background-image:

        radial-gradient(
            circle at 20% 20%,
            rgba(122,92,167,.18) 1px,
            transparent 1px
        );

    background-size:
        24px 24px;

    pointer-events:none;

}



.lavArticleBreadcrumb{

    margin-bottom:2.5rem;

}


.lavArticleBreadcrumb ol{

    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:.75rem;

    margin:0;
    padding:0;

    list-style:none;

}


.lavArticleBreadcrumb a{

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

    text-decoration:none;

    transition:.3s;

}


.lavArticleBreadcrumb a:hover{

    color:var(--lavender-primary);

}


.lavArticleBreadcrumb li{

    color:var(--lavender-text-light);
    font-size:.92rem;

}



.lavArticleHeroGrid{

    display:grid;

    grid-template-columns:

        minmax(0,1.1fr)
        minmax(380px,.9fr);

    gap:5rem;

    align-items:center;

}



.lavArticleHeroCategory{

    display:inline-flex;
    align-items:center;
    gap:.8rem;

    margin-bottom:1.25rem;

    padding:.6rem 1rem;

    border-radius:999px;

    background:
        rgba(126,87,194,.08);

    color:var(--lavender-primary);

    font-weight:600;

    letter-spacing:.08em;

    text-transform:uppercase;

    font-size:.78rem;

}


.lavArticleHeroCategory span{

    width:.65rem;
    height:.65rem;

    border-radius:50%;

    background:
        var(--lavender-primary);

}



.lavArticleHeroContent h1{

    margin:0 0 1.5rem;

    max-width:15ch;

    font-size:
        clamp(
            2.6rem,
            5vw,
            4.8rem
        );

    line-height:1.05;

    letter-spacing:-.04em;

    color:
        var(--lavender-heading);

}



.lavArticleHeroLead{

    max-width:42rem;

    margin:0;

    font-size:1.18rem;

    line-height:1.85;

    color:
        var(--lavender-text);

}



.lavArticleHeroMeta{

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:1.5rem;

    margin-top:2.5rem;

}


.lavArticleHeroMetaItem{

    display:flex;
    flex-direction:column;
    gap:.4rem;

}


.lavArticleHeroMetaItem span{

    font-size:.8rem;

    text-transform:uppercase;

    letter-spacing:.08em;

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

}


.lavArticleHeroMetaItem strong,
.lavArticleHeroMetaItem time{

    color:
        var(--lavender-heading);

    font-weight:600;

}


.lavArticleHeroDivider{

    width:1px;
    height:3rem;

    background:
        rgba(0,0,0,.08);

}



.lavArticleHeroActions{

    display:flex;
    flex-wrap:wrap;
    gap:1rem;

    margin-top:3rem;

}



.lavArticleHeroFigure{

    position:relative;

    margin:0;

}


.lavArticleHeroImage{

    position:relative;

    overflow:hidden;

    border-radius:2rem;

    background:#fff;

    box-shadow:

        0 30px 80px
        rgba(34,29,55,.14);

}


.lavArticleHeroImage::before{

    content:"";

    position:absolute;
    inset:0;

    background:

        linear-gradient(
            180deg,
            rgba(255,255,255,.15),
            transparent
        );

    z-index:2;

    pointer-events:none;

}


.lavArticleHeroImage img{

    display:block;

    width:100%;
    height:auto;

    transition:
        transform
        .9s
        cubic-bezier(.22,1,.36,1);

}


.lavArticleHeroFigure:hover img{

    transform:scale(1.04);

}


.lavArticleHeroFigure figcaption{

    margin-top:1.25rem;

    text-align:center;

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

    font-size:.94rem;

    line-height:1.7;

}



@media (max-width:1100px){

    .lavArticleHeroGrid{

        grid-template-columns:1fr;

        gap:3.5rem;

    }

}


@media (max-width:768px){

    .lavArticleHero{

        padding:

            7rem
            0
            4rem;

    }

    .lavArticleHeroContent h1{

        max-width:none;

    }

    .lavArticleHeroMeta{

        gap:1rem;

    }

    .lavArticleHeroDivider{

        display:none;

    }

}