.materials-header { justify-content: space-between; }
.materials-back { color: #fff; font-size: .8rem; font-weight: 800; text-decoration: none; }
.materials { padding-block: 145px 80px; }
.materials h1 { margin: 0; font-size: clamp(2rem, 5vw, 4rem); line-height: 1.1; letter-spacing: -.04em; }
.materials .section-heading > p { color: var(--color-muted); }
.materials .section-heading > .eyebrow { color: var(--color-primary); }
.materials .section-heading > .materials-role { color: var(--color-primary); font-weight: 900; }
.materials-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 45px; }
.material-card { display: flex; flex-direction: column; padding: 22px; background: var(--color-light); border-radius: 24px; }
.material-preview { display: grid; place-items: center; height: 280px; overflow: hidden; padding: 18px; background: var(--color-primary); border-radius: 16px; }
.material-preview img { width: 100%; height: auto; }
.preview-photo { padding-block: 0; }
.preview-photo img { width: auto; height: 100%; object-fit: contain; }
.font-preview { align-content: center; gap: 10px; color: #fff; }
.font-preview span { font-size: 5rem; font-weight: 900; line-height: 1; }
.font-preview strong { font-size: 1.1rem; }
.material-card h2 { font-size: 1.2rem; line-height: 1.3; margin: 24px 0 10px; }
.material-card p { color: var(--color-muted); font-size: .85rem; flex: 1; }
.material-card .button { margin-top: 14px; padding-inline: 18px; font-size: .73rem; box-shadow: none; }
.materials-note { margin-top: 36px; color: var(--color-primary); font-weight: 800; }
@media (max-width: 820px) { .materials-grid { grid-template-columns: 1fr; max-width: 520px; } .materials { padding-top: 115px; } }