/*
===============================================================================
[Painel] | 04 LAYOUT GRID - v1.0 - /src/static/css/04-layout/grid.css
===============================================================================
*/

/* =============================================================================
   GRID & CONTAINER - PAINEL
   =============================================================================
   Sistema de grid e container
   ============================================================================= */

.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--spacing-6);
}

.main-content {
    margin-top: var(--navbar-height);
    margin-bottom: var(--footer-height);
    min-height: calc(100vh - var(--navbar-height) - var(--footer-height));
    padding: var(--spacing-8) 0;
}

/* -------------------------------------------------------------------------
   GRID SYSTEM
   ------------------------------------------------------------------------- */
.grid {
    display: grid;
    gap: var(--spacing-6);
}

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

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

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

/* Responsive */
@media (max-width: 768px) {
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
    }
}


/*
===============================================================================
[Painel] | 04 LAYOUT GRID - v1.0 - /src/static/css/04-layout/grid.css
===============================================================================
*/