/* ==========================================================================
   Casa do Poço — layout
   Page shell, 12-column grid (12px outer margin, 12px gap), and the footer.
   ========================================================================== */

/* --- Shell + 12-column grid ----------------------------------------------- */

.l-shell {
    width: 100%;
    max-width: 1512px;
    margin-inline: auto;
    padding-inline: var(--page-gutter);
}

.l-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--grid-gap);
}

@media (min-width: 48rem) {
    .l-grid {
        grid-template-columns: repeat(var(--grid-cols), 1fr);
        column-gap: var(--grid-gap);
    }
}

.l-col {
    grid-column: 1 / -1;
}

@media (min-width: 48rem) {
    .l-col {
        grid-column: var(--col-start, auto) / span var(--col-span, 12);
    }

    .l-col-1  { grid-column: span 1; }
    .l-col-2  { grid-column: span 2; }
    .l-col-3  { grid-column: span 3; }
    .l-col-4  { grid-column: span 4; }
    .l-col-5  { grid-column: span 5; }
    .l-col-6  { grid-column: span 6; }
    .l-col-7  { grid-column: span 7; }
    .l-col-8  { grid-column: span 8; }
    .l-col-9  { grid-column: span 9; }
    .l-col-10 { grid-column: span 10; }
    .l-col-11 { grid-column: span 11; }
    .l-col-12 { grid-column: span 12; }
}

.main {
    display: block;
    margin-top: 3rem;
}

.main.l-grid {
    display: grid;
}