body.page-parent-resources { background: var(--ss-bg, #fbfaf8); color: var(--ss-text, #1f1712); } .page-parent-resources .pr-main { width: min(100% - 2rem, 76rem); margin-inline: auto; padding-block: clamp(1rem, 3vw, 2rem) clamp(3rem, 7vw, 6rem); } .page-parent-resources .pr-breadcrumbs, .page-parent-resources .pr-shell { width: min(100%, 68rem); margin-inline: auto; } .page-parent-resources .pr-breadcrumbs { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; padding-block: .75rem 1.5rem; color: var(--ss-muted, #4f433c); font-size: .85rem; text-align: center; } .page-parent-resources .pr-hero, .page-parent-resources .pr-section { width: min(100%, 48rem); margin-inline: auto; } .page-parent-resources .pr-hero { padding: clamp(1.5rem, 5vw, 3.5rem); border: 1px solid var(--ss-border, rgba(54, 43, 36, .14)); border-radius: 1.5rem; background: var(--ss-surface, #fff); box-shadow: 0 1.5rem 4rem rgba(54, 43, 36, .06); text-align: center; } .page-parent-resources .pr-kicker { margin: 0 0 .75rem; color: var(--ss-green, #116a42); font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-align: center; text-transform: uppercase; } .page-parent-resources .pr-hero h1, .page-parent-resources .pr-section h2 { color: var(--ss-ink, #362b24); text-align: center; text-wrap: balance; } .page-parent-resources .pr-hero h1 { margin-inline: auto; max-width: 18ch; font-size: clamp(2.25rem, 5vw, 4rem); line-height: 1.05; } .page-parent-resources .pr-hero > p, .page-parent-resources .pr-section > p, .page-parent-resources .faq-item > p { max-width: 68ch; margin-inline: auto; text-align: left; } .page-parent-resources .pr-section { padding-block: clamp(2.5rem, 6vw, 5rem); } .page-parent-resources .pr-section + .pr-section { border-top: 1px solid var(--ss-border, rgba(54, 43, 36, .14)); } .page-parent-resources .pr-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-inline: auto; } .page-parent-resources .pr-link-card { display: flex; min-width: 0; flex-direction: column; gap: .5rem; height: 100%; padding: 1.25rem; border: 1px solid var(--ss-border, rgba(54, 43, 36, .14)); border-radius: 1rem; background: var(--ss-surface, #fff); color: inherit; text-align: center; text-decoration: none; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; } .page-parent-resources .pr-link-card span { color: var(--ss-muted, #4f433c); } .page-parent-resources .pr-link-card:hover { transform: translateY(-2px); border-color: var(--ss-teal, #289fa1); box-shadow: 0 .75rem 2rem rgba(54, 43, 36, .1); } .page-parent-resources .faq-item { padding-block: 1rem; border-top: 1px solid var(--ss-border, rgba(54, 43, 36, .14)); } .page-parent-resources .faq-item h3 { text-align: center; } @media (max-width: 47.99rem) { .page-parent-resources .pr-main { width: min(100% - 1.25rem, 76rem); } .page-parent-resources .pr-hero { padding: 1.25rem; } .page-parent-resources .pr-grid { grid-template-columns: 1fr; } } .page-parent-resources .pr-hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-block: 1.5rem 1rem; } .page-parent-resources .ss-btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 1.25rem; border-radius: 9999px; font-weight: 600; border: 1px solid var(--ss-border, rgba(54, 43, 36, .2)); background: var(--ss-surface, #fff); color: var(--ss-text, #1f1712); text-decoration: none; transition: all 0.2s ease; } .page-parent-resources .ss-btn-secondary:hover { background: var(--ss-surface2, #f4f1ed); border-color: var(--ss-teal, #289fa1); color: var(--ss-ink, #362b24); }