/* Mobile */
.grid {
    display: grid;
    grid-template-areas:
        "a1"
        "a2"
        "a3"
        "b1"
        "b2"
        "b3"
        "c1"
        "c2"
        "c3"
        "d1"
        "d2"
        "d3";
}

@media screen and (width >=545px) {

    .grid {
        margin-top: 50px;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-areas:
            "a2 . ."
            "a2 a1 a1"
            "a2 a3 a3"
            "a2 . ."
            ". . b2"
            "b1 b1 b2"
            "b3 b3 b2"
            ". . b2"
            "c2 . ."
            "c2 c1 c1"
            "c2 c3 c3"
            "c2 . ."
            ". . d2"
            "d1 d1 d2"
            "d3 d3 d2"
            ". . d2";
    }

}

.a1 {
    grid-area: a1;
}

.a2 {
    grid-area: a2;
}

.a3 {
    grid-area: a3;
}

.b1 {
    grid-area: b1;
}

.b2 {
    grid-area: b2;
}

.b3 {
    grid-area: b3;
}

.c1 {
    grid-area: c1;
}

.c2 {
    grid-area: c2;
}

.c3 {
    grid-area: c3;
}

.d1 {
    grid-area: d1;
}

.d2 {
    grid-area: d2;
}

.d3 {
    grid-area: d3;
}