/* Explain: Section spacing and responsive layout utilities. - */
.section-pad {
    padding: 4.75rem 1rem;
}

.section-wrap {
    width: min(1120px, calc(100% - 2rem));
    margin-inline: auto;
}

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
}

.command-topbar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem;
}

@media (min-width: 640px) {
    .section-pad {
        padding-block: 5.5rem;
    }

    .command-topbar {
        grid-template-columns: auto 1fr;
        align-items: center;
    }
}

@media (min-width: 768px) {
    .section-wrap {
        width: min(1120px, calc(100% - 4rem));
    }
}

@media (min-width: 1024px) {
    .section-pad {
        padding-block: 6.75rem;
    }

    .hero-grid {
        grid-template-columns: 1fr;
        align-items: center;
        gap: 3rem;
    }

    .command-topbar {
        grid-template-columns: auto 1fr auto;
    }
}