/* items */

body > div {
    display: grid;
    grid-template-columns: auto auto;
    gap: 15px;
}

body > div > div {
    color: white;
    padding: 20px;
    text-align: center;
    font-size: 3em;
}

.item-1,
.item-6 {
    display: none;
}

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

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

.item-9 {
    grid-row: 1;
}

/* specific item styles */

.item-1 {
    background: #b03532;
}

.item-2 {
    background: #33a8a5;
}

.item-3 {
    background: #30997a;
}

.item-4 {
    background: #6a478f;
}

.item-5 {
    background: #da6f2b;
}

.item-6 {
    background: #3d8bb1;
}

.item-7 {
    background: #e03f3f;
}

.item-8 {
    background: #59a627;
}

.item-9 {
    background: #4464a1;
}

@media screen and (min-width: 760px) {
    body > div {
        grid-template-columns: 1fr 2fr 1fr;
    }

    .item-1,
    .item-6 {
        display: block;
    }

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