/* Shared Section Builder wrappers. */

.section-bg {
    background: var(--color-light);
}

.section-bg--white {
    background: var(--color-white);
    color: var(--color-text);
}

.section-bg--light {
    background: var(--color-light);
    color: var(--color-text);
}

.section-bg--primary {
    background: var(--color-primary);
    color: var(--color-white);
}

.section-bg--accent {
    background: var(--color-accent);
    color: var(--color-dark);
}

.section-bg--secondary {
    background: var(--color-secondary);
    color: var(--color-dark);
}

.section-bg--dark {
    background: var(--color-dark);
    color: var(--color-white);
}

.section-bg :is(h1, h2, h3, h4, h5, h6) {
    color: inherit;
}

.has-section-divider {
    position: relative;
}

.section-divider {
    position: absolute;
    top: calc(var(--section-pad) - var(--space-sm, 1rem));
    left: var(--container-pad);
    right: var(--container-pad);
    max-width: var(--container-max);
    margin-inline: auto;
    height: 1px;
    background: currentColor;
    opacity: 0.2;
    pointer-events: none;
}

.section--narrow__inner {
    grid-column: 1 / -1;
}

.section--narrow__inner .container {
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
}

@media (min-width: 1025px) {
    .section--narrow__inner {
        grid-column: 2 / 12;
    }
}