/* Explain: Section rhythm and structural backdrops for roofing pages - */
.section-pad {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.bg-gradient-dawn {
    background: linear-gradient(135deg, var(--pure-white) 0%, color-mix(in srgb, var(--accent-color) 40%, var(--pure-white)) 100%);
}

.bg-gradient-dusk {
    background: linear-gradient(135deg, var(--dark-charcoal) 0%, color-mix(in srgb, var(--primary-color) 70%, var(--dark-charcoal)) 100%);
}

.bg-gradient-mist {
    background: linear-gradient(180deg, var(--background-color) 0%, color-mix(in srgb, var(--accent-color) 35%, var(--background-color)) 100%);
}

.steel-grid {
    background-image: linear-gradient(color-mix(in srgb, var(--primary-color) 10%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--primary-color) 10%, transparent) 1px, transparent 1px);
    background-size: 34px 34px;
}

@media (min-width: 1024px) {
    .section-pad {
        padding-top: 6.5rem;
        padding-bottom: 6.5rem;
    }
}