body {
    margin: 0;
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100svh;
}

header, section {
    padding: 2rem 1rem;
}

h1 {margin: 0;}

footer {
    padding: 1rem;
    text-align: right;
}

section {
    display: flow-root;
}

header {
    background: hsl(150, 50%, 10%);
    color: white;
}

main {
    background: hsl(330, 50%, 90%)
}

footer {
    background: hsl(150, 50%, 60%)
}

article {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 0.5rem;
}

article div {
    background: hsl(330, 50%, 30%);
    color: hsl(330, 50%, 90%);
    padding: 0.5rem;
}

section:nth-of-type(even) {
    background: hsl(150, 50%, 30%);
    color: hsl(150, 50%, 90%);
}