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

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

h1 {
    margin: 0;
}

h3 {
    margin-bottom: 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;
    gap: 0.5rem;
}

article div {
    background: hsl(330, 50%, 30%);
    color: hsl(330, 50%, 90%);
    padding-right: 0.5rem;
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto 1fr;
    gap: 0.5rem;
}

img {
    grid-row: span 2;
}

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