/* Explain: App-specific layout utilities for spacing and grids. */
/* Page width wrapper */
.site-container {
    width: 100%;
    max-width: 74rem;
    margin-inline: auto;
    padding-inline: 1.15rem;
}

/* Vertical rhythm between sections */
.section {
    padding-block: 3.5rem;
}

.section-sm {
    padding-block: 2.5rem;
}

.section-surface {
    background: var(--surface-color);
    border-block: 1px solid rgba(255, 255, 255, 0.05);
}

.section-gradient {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, var(--surface-color) 100%);
}

/* Generic grids tuned for the app */
.grid-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

@media (min-width: 640px) {
    .grid-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .grid-cards {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 640px) {
    .grid-cards-2 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.4rem;
    }
}

.grid-cards-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.4rem;
}