/* Explain: App-specific layout utilities for spacing, grids, and responsive design. - */
.section-wrap {
    width: min(100% - 2rem, var(--content-width));
    margin-inline: auto;
}

.section-spacing {
    padding-block: var(--section-padding-mobile);
}

.section-spacing-tight {
    padding-block: 3rem;
}

.section-heading {
    max-width: 46rem;
}

.section-heading--center {
    margin-inline: auto;
    text-align: center;
}

.cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.split-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2rem, 5vw, 4rem);
}

.content-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

.marketplace-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

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

.dashboard-app-layout {
    display: grid;
    min-height: 100vh;
    grid-template-columns: 1fr;
}

.mobile-scroll-table {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (min-width: 640px) {
    .section-wrap {
        width: min(100% - 3rem, var(--content-width));
    }

    .content-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .marketplace-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .section-spacing {
        padding-block: var(--section-padding-desktop);
    }

    .section-spacing-tight {
        padding-block: 4.5rem;
    }

    .split-grid {
        grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
        align-items: center;
    }

    .content-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .marketplace-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

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

    .dashboard-app-layout {
        grid-template-columns: 17.5rem minmax(0, 1fr);
    }
}

@media (min-width: 1280px) {
    .dashboard-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}