.hero{--gap:var(--spacing-12x);align-items:center;display:flex;gap:var(--gap);&.hero--vertical{flex-direction:column;text-align:center;& .btn-group{justify-content:center}}&.hero--horizontal{justify-content:space-between;& .hero__body{flex:1 0 var(--content-width)}& .hero__image{flex:1 1 calc(100% - var(--content-width) - var(--gap))}@media (max-width:1050px){flex-direction:column;& .hero__body{flex:none;max-width:500px;text-align:center;width:100%}& .btn-group{justify-content:center}& .hero__image{flex:none;max-width:100%}}}.dnd-section:has(&){margin-bottom:var(--spacing-14x);padding-block:var(--spacing-14x) var(--spacing-24x);&:has(.section-background--dark-blue){& .btn--link{--text-color:var(--white);--hover-text-color:var(--gray-50);--underline-color:var(--white);--hover-underline-color:var(--hover-text-color)}}}}.preheader.hero__preheader{color:var(--preheader-color)!important;margin-bottom:var(--spacing-5x)}.hero__heading{margin-bottom:var(--spacing-4x);max-width:var(--content-width)}.hero__description{margin-bottom:var(--spacing-8x);max-width:var(--content-width)}.hero__image{border-radius:var(--radius-md)}.hero--gradient{color:var(--white);justify-content:space-between;& .hero__body{flex:1 0 var(--content-width)}& .hero__description,& .hero__heading{max-width:unset}& .hero__image-wrapper{flex:1 1 calc(100% - var(--gap) - var(--content-width));height:stretch;position:relative}& .hero__image{display:block;height:calc(100% + var(--padding-bottom) + 155px);inset:-80px auto auto 0;max-width:unset;object-fit:cover;object-position:0 0;position:absolute;width:173%}& .hero__background{background:var(--background-dark-blue);height:100%;inset:0 auto auto 0;position:absolute;width:100%;z-index:-1;& img{height:100%;object-fit:cover;width:100%}}.dnd-section:has(&){--padding-bottom:265px;--padding-top-offset:112px;margin-bottom:var(--spacing-14x);overflow:clip;padding-block:calc(var(--spacing-14x) + var(--padding-top-offset)) var(--padding-bottom)!important;position:relative;z-index:0}@media (max-width:1050px){flex-direction:column;& .hero__body{flex:none;max-width:500px;text-align:center;width:100%}& .btn-group{justify-content:center}& .hero__image-wrapper{flex:none;max-width:100%}& .hero__image{height:auto;position:static;width:100%}.dnd-section:has(&){padding-block:var(--spacing-14x) var(--spacing-24x)!important}}}