/* ==========================================================================
   Grid layout
   ========================================================================== */

.app-main {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-16);
    margin-top: var(--space-8);
    padding-bottom: var(--space-16);
}

.app-main > glass-card {
    margin-bottom: 0;
}

/* Full-width tiles */
glass-card[data-section="history"],
glass-card[data-section="settings"] {
    grid-column: span 3;
}

/* Collapse only when screen cannot fit 3 tiles */
@media (max-width: 900px) {
    .app-main {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    glass-card[data-section="history"],
    glass-card[data-section="settings"] {
        grid-column: span 2;
    }
}

@media (max-width: 600px) {
    .app-main {
        grid-template-columns: minmax(0, 1fr);
    }

    glass-card[data-section="history"],
    glass-card[data-section="settings"] {
        grid-column: span 1;
    }
}