@media screen and (min-width: 664px) {
    .container {
        height: 100vh;
        display: grid;
        grid-template-columns: 1fr 1fr 30%;
        grid-template-rows: 1fr 1fr 1fr;
        grid-template-areas:
            "item1 item2 item3"
            "item4 item5 item6"
            "item8 item9 item7"
            "item10 item11 item7"
            "item12 item13 item7";
    }

}


@media screen and (min-width:1124px) {
    .container {
        height: 100vh;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 30%;
        grid-template-rows: 1fr 1fr 1fr 1fr;
        grid-template-areas:
            "item1 item2 item3 item3"
            "item4 item5 item6 item7"
            "item8 item9 item9 item7"
            "item10 item11 item12 item13";
    }

}


@media screen and (min-width:1366px) {
    .container {
        height: 100vh;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 25%;
        grid-template-rows: 1fr 1fr 1fr 1fr;
        grid-template-areas:
            "item1 item2 item3 item3"
            "item4 item5 item6 item7"
            "item8 item9 item9 item7"
            "item10 item11 item12 item13";
    }
}