/* Explain: Layout utilities like containers and section padding. */
.container-elora {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: 1rem;
}

@media (min-width: 640px) {
    .container-elora {
        padding-inline: 1.75rem;
    }
}

.elora-section {
    padding-block: 3.5rem;
}

@media (min-width: 768px) {
    .elora-section {
        padding-block: 5rem;
    }
}

.elora-page-head {
    background: linear-gradient(160deg, var(--surface-color), var(--surface-alt));
    border-bottom: 1px solid var(--border-color);
    padding-block: 2.75rem;
}

@media (min-width: 768px) {
    .elora-page-head {
        padding-block: 4rem;
    }
}

.section-head {
    max-width: 44rem;
    margin-inline: auto;
    text-align: center;
}

.elora-divider {
    width: 64px;
    height: 2px;
    border-radius: 2px;
    background: var(--secondary-color);
    margin: 1.15rem auto 0;
}

@media (min-width: 768px) {
    .elora-cta-band {
        padding: 3.5rem 3rem;
    }
}