/* Explain: Layout utilities for landing page sections and dashboard grids */
.section-wrap {
    width: min(1180px, calc(100% - 2rem));
    margin-inline: auto;
}

.section-pad {
    padding-block: clamp(4rem, 8vw, 7.5rem);
}

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

.dashboard-grid {
    display: grid;
    grid-template-columns: 0.72fr 1fr;
    gap: 0.85rem;
}

.preview-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.2fr);
    gap: 1.25rem;
}

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

@media (min-width: 768px) {
    .hero-grid {
        grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1.1fr);
        gap: 3rem;
    }

    .logo-cloud {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .hero-grid {
        gap: 4rem;
    }
}

@media (max-width: 900px) {
    .preview-grid,
    .dashboard-grid {
        grid-template-columns: 1fr;
    }
}