.hero{
    background:
        linear-gradient(100deg,rgba(8,28,17,.96) 0%,rgba(8,31,18,.84) 35%,rgba(13,49,27,.48) 65%,rgba(10,31,19,.28)),
        url('images/site/maskgroup42-014612ac8b.webp') center 48% / cover no-repeat;
}

.product-art{overflow:hidden;background:#e7e3da}
.product-art img{width:100%;height:100%;display:block;object-fit:contain;background:#fff;transition:transform .35s ease}
.product-grid article:hover .product-art img{transform:scale(1.035)}

.material-story{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr);align-items:stretch;margin:10px clamp(20px,5vw,82px) 120px;background:#17211e;color:#fff}
.material-story figure{margin:0;min-height:560px;overflow:hidden}
.material-story img{display:block;width:100%;height:100%;object-fit:cover}
.material-story>div{display:flex;flex-direction:column;justify-content:center;padding:clamp(42px,6vw,90px)}
.material-story h2{font-size:clamp(34px,4vw,58px);line-height:1.04;letter-spacing:-.055em;margin:14px 0 24px}
.material-story>div>p:not(.eyebrow){color:#bdc5bf;margin:0 0 28px}
.material-story .text-button{color:#9bd376;text-align:left}

@media(max-width:760px){
    .hero{background-position:62% center}
    .material-story{grid-template-columns:1fr;margin:0 20px 70px}
    .material-story figure{min-height:360px}
    .material-story>div{padding:38px 26px 44px}
}