/* Basics: */

* {
    margin: 0;
    box-sizing: border-box;
}

body {
    color: #333;
    font-size: 1em;
    font-family: sans-serif;
    max-width: 1024px;
    margin: 1rem auto;
}

.grid-container > * {
    font-size: 1.3rem;
    border: 1px solid rgba(0, 0, 0, 0.2);
    padding: 1rem;
}

.grid-container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: auto auto auto auto;
}

.grid-item-1 {
    grid-column: 1 / 2;
    grid-row: 1 / 4;
}

.grid-item-2 {
    grid-column: 2 / 4;
    grid-row: 1 / 2;
}

.grid-item-4 {
    grid-column: 3 / 4;
    grid-row: 2 / 4;
}

.grid-item-6 {
    grid-column: 1 / 4;
    grid-row: 4 / 5;
}