.why-surfaces{background:var(--wsf-bg, #FFFFFF);color:#1a1a1a;padding:var(--wsf-pad-y, 120px) 40px;position:relative}.why-surfaces__inner{max-width:1600px;margin:0 auto}.why-surfaces__header{text-align:center;margin-bottom:56px}.why-surfaces__overline{font-family:Inter,sans-serif;font-size:12px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:#707070;margin:0 0 28px}.why-surfaces__heading{font-family:Bodoni Moda,serif;font-weight:400;font-size:clamp(36px,5.4vw,84px);line-height:1.02;letter-spacing:-.005em;text-transform:uppercase;color:#1a1a1a;max-width:1100px;margin:0 auto}.why-surfaces__heading-em{font-style:italic;font-weight:400}.why-surfaces__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--wsf-gap, 20px)}.why-surfaces__card{position:relative;width:100%;box-sizing:border-box;overflow:hidden;aspect-ratio:4 / 3;background:#e5e5e5;min-width:0;min-height:300px}.why-surfaces__card-media{position:absolute;top:0;right:0;bottom:0;left:0}.why-surfaces__card-img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.6s cubic-bezier(.19,1,.22,1)}.why-surfaces__card:hover .why-surfaces__card-img,.why-surfaces__card:focus-within .why-surfaces__card-img{transform:scale(1.04)}.why-surfaces__card-img--placeholder{display:flex;align-items:center;justify-content:center;background:#e5e5e5}.why-surfaces__placeholder-svg{width:60%;height:60%;fill:#c3c3c3}.why-surfaces__card-overlay{position:absolute;top:0;right:0;bottom:0;left:0;padding:36px;display:flex;flex-direction:column;justify-content:flex-end;color:#fff;background:linear-gradient(to top,rgba(0,0,0,.78) 0%,rgba(0,0,0,.55) 25%,rgba(0,0,0,.15) 55%,transparent 85%);transition:background .7s cubic-bezier(.19,1,.22,1)}.why-surfaces__card:hover .why-surfaces__card-overlay{background:linear-gradient(to top,rgba(0,0,0,.82) 0%,rgba(0,0,0,.6) 30%,rgba(0,0,0,.2) 60%,transparent 90%)}.why-surfaces__card-num{font-family:Bodoni Moda,serif;font-weight:400;font-size:28px;line-height:1;letter-spacing:-.01em;color:#fff;margin-bottom:14px;opacity:.98}.why-surfaces__card-title{font-family:Inter,sans-serif;font-size:14px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:#fff;margin:0 0 10px}.why-surfaces__card-desc{font-family:Inter,sans-serif;font-size:13px;line-height:1.55;color:#ffffffd9;margin:0;max-width:340px}.why-surfaces__card-link{align-self:flex-start;display:inline-flex;align-items:center;min-height:36px;margin-top:10px;color:#fff;font-family:Inter,sans-serif;font-size:11px;font-weight:500;line-height:1.4;letter-spacing:.14em;text-transform:uppercase;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}.why-surfaces__card-link:focus-visible{outline:1px solid currentColor;outline-offset:4px}@media(prefers-reduced-motion:reduce){.why-surfaces__card-img,.why-surfaces__card-overlay{transition:none}.why-surfaces__card:hover .why-surfaces__card-img,.why-surfaces__card:focus-within .why-surfaces__card-img{transform:none}}@media screen and (max-width:1100px){.why-surfaces__card-overlay{padding:28px}.why-surfaces__card-num{font-size:24px;margin-bottom:12px}.why-surfaces__card-title{font-size:13px;letter-spacing:.18em}.why-surfaces__card-desc{font-size:12px}}@media screen and (max-width:989px){.why-surfaces{padding:var(--wsf-pad-y-mobile, 64px) 24px}.why-surfaces__header{margin-bottom:36px}.why-surfaces__overline{font-size:11px;letter-spacing:.22em;margin-bottom:18px}.why-surfaces__heading{font-size:clamp(30px,7vw,44px);line-height:1.05}.why-surfaces__grid{grid-template-columns:repeat(2,1fr);gap:12px}.why-surfaces__card{aspect-ratio:3 / 4}.why-surfaces__card-overlay{padding:20px}.why-surfaces__card-num{font-size:20px;margin-bottom:8px}.why-surfaces__card-title{font-size:11px;letter-spacing:.16em;margin-bottom:6px}.why-surfaces__card-desc{font-size:11px;line-height:1.5}.why-surfaces__card-link{min-height:44px;font-size:10px}}@media screen and (max-width:540px){.why-surfaces__grid{grid-template-columns:1fr;gap:12px}.why-surfaces__card{aspect-ratio:4 / 3}.why-surfaces__card-overlay{padding:24px}.why-surfaces__card-num{font-size:24px}.why-surfaces__card-title,.why-surfaces__card-desc{font-size:12px}}
/*# sourceMappingURL=/cdn/shop/t/19/assets/section-why-our-surfaces.css.map */