/* assets/css/03-layout.css */
/* Page structure, grid, container, section spacing */

.container {
    width: 100%;
    max-width: 1160px;
    margin-inline: auto;
    padding-inline: var(--space-6);
}

.container--narrow { max-width: 760px; }
.container--wide   { max-width: 1400px; }

section { padding-block: var(--space-24); }

.section-label {
    font-family:    var(--font-mono);
    font-size:      0.7rem;
    font-weight:    500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color:          var(--teal);
    margin-bottom:  var(--space-3);
    display:        flex;
    align-items:    center;
    gap:            var(--space-2);
}
.section-label::before {
    content:    '';
    display:    block;
    width:      24px;
    height:     1px;
    background: var(--teal);
}

.section-header {
    margin-bottom: var(--space-12);
}

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }

@media (max-width: 900px) {
    .grid-2, .grid-3 { grid-template-columns: 1fr; }
    section { padding-block: var(--space-16); }
}
@media (max-width: 600px) {
    .container { padding-inline: var(--space-4); }
    section    { padding-block: var(--space-12); }
}