.shop-by-material{padding:var(--space-3xl) 0;background-color:var(--color-background)}.material-grid{display:grid;grid-template-columns:repeat(var(--columns-mobile, 2),1fr);gap:var(--space-lg);margin-top:var(--space-xl)}@media(min-width:768px){.material-grid{grid-template-columns:repeat(var(--columns-desktop, 4),1fr);gap:var(--space-xl)}}.material-card{position:relative;overflow:hidden;background-color:var(--color-surface);border-radius:var(--radius-sm);border:1px solid transparent;transition:border-color .3s var(--ease-out)}.material-card:hover{border-color:var(--color-accent)}.material-card__link{display:block;text-decoration:none;color:inherit}.material-card__media{position:relative;aspect-ratio:1 / 1;overflow:hidden;background-color:var(--color-surface-alt)}.material-card__image{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease-out)}.material-card:hover .material-card__image{transform:scale(1.03)}@media(prefers-reduced-motion:reduce){.material-card__image{transition:none}.material-card:hover .material-card__image{transform:none}}.material-card__placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-family:var(--font-body);font-size:var(--text-lg);color:var(--color-text);opacity:.4;text-transform:uppercase;letter-spacing:.05em}.material-card__content{padding:var(--space-md);text-align:center}.material-card__title{font-family:var(--font-body);font-size:var(--text-base);font-weight:600;text-transform:uppercase;letter-spacing:.08em;margin:0 0 var(--space-xs);color:var(--color-text)}.material-card__description{font-family:var(--font-body);font-size:var(--text-sm);line-height:1.5;margin:0 0 var(--space-sm);color:var(--color-text);opacity:.8}.material-card__cta{display:inline-flex;align-items:center;gap:var(--space-2xs);font-family:var(--font-body);font-size:var(--text-xs);font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:var(--color-accent);transition:gap .3s var(--ease-out)}.material-card:hover .material-card__cta{gap:var(--space-xs)}@media(prefers-reduced-motion:reduce){.material-card__cta{transition:none}.material-card:hover .material-card__cta{gap:var(--space-2xs)}}.material-card__cta svg{width:14px;height:14px}@media(max-width:767px){.material-card__content{padding:var(--space-sm)}.material-card__title{font-size:var(--text-sm)}.material-card__description{font-size:var(--text-xs)}}
/*# sourceMappingURL=/cdn/shop/t/19/assets/component-shop-by-material.css.map */