/* Three-area grid: hero / main / footer */
.page-grid {
    display: grid;

    grid-template-rows: auto 1fr auto;
    grid-template-areas:
    "hero"
    "main"
    "footer";

    /* Center each area content horizontally and vertically */
    place-items: center;

    /* Spacing */
    padding: 24px;
    gap: 1em;
}

.page-grid > [data-slot="hero"] {
    grid-area: hero;
    width: min(720px, 100%);
}

.page-grid > [data-slot="main"] {
    grid-area: main;
    width: min(720px, 100%);
}

.page-grid > [data-slot="footer"] {
    grid-area: footer;
    width: min(720px, 100%);
}