/* ================================================================================
   LAYOUT.CSS - Layout and Grid Systems
   ================================================================================ */

/* ===== CONTAINER ===== */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px;
}

/* ===== SECTIONS ===== */
.section {
    padding: 96px 0;
}

/* ===== GRID UTILITIES ===== */
.grid {
    display: grid;
    gap: 32px;
}

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

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

/* ===== FLEX UTILITIES ===== */
.flex {
    display: flex;
}

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}