.media-grid {
    display: grid;
    grid-template-areas: "smallImg1 smallImg2""smallImg3 smallImg4""bigImg bigImg";
    grid-template-columns: 1fr 1fr
}

.media-grid>.media-grid__item:first-child {
    grid-area: smallImg1
}

.media-grid>.media-grid__item:nth-child(2) {
    grid-area: smallImg2
}

.media-grid>.media-grid__item:nth-child(3) {
    grid-area: smallImg3
}

.media-grid>.media-grid__item:nth-child(4) {
    grid-area: smallImg4
}

.media-grid>.media-grid__item:nth-child(5) {
    grid-area: bigImg
}

@media screen and (min-width:768px) {
    .media-grid {
        grid-template-columns: 1fr 1fr 1fr 1fr
    }

    .media-grid:nth-of-type(odd) {
        grid-template-areas: "smallImg1 smallImg2 bigImg bigImg""smallImg3 smallImg4 bigImg bigImg"
    }

    .media-grid:nth-of-type(odd)>.media-grid__item:first-child {
        grid-area: smallImg1
    }

    .media-grid:nth-of-type(odd)>.media-grid__item:nth-child(2) {
        grid-area: smallImg2
    }

    .media-grid:nth-of-type(odd)>.media-grid__item:nth-child(3) {
        grid-area: smallImg3
    }

    .media-grid:nth-of-type(odd)>.media-grid__item:nth-child(4) {
        grid-area: smallImg4
    }

    .media-grid:nth-of-type(odd)>.media-grid__item:nth-child(5) {
        grid-area: bigImg
    }
}

.media-grid:nth-of-type(2n) {
    grid-template-areas: "bigImg bigImg""smallImg1 smallImg2""smallImg3 smallImg4"
}

.media-grid:nth-of-type(2n)>.media-grid__item:first-child {
    grid-area: bigImg
}

.media-grid:nth-of-type(2n)>.media-grid__item:nth-child(2) {
    grid-area: smallImg1
}

.media-grid:nth-of-type(2n)>.media-grid__item:nth-child(3) {
    grid-area: smallImg2
}

.media-grid:nth-of-type(2n)>.media-grid__item:nth-child(4) {
    grid-area: smallImg3
}

.media-grid:nth-of-type(2n)>.media-grid__item:nth-child(5) {
    grid-area: smallImg4
}

@media screen and (min-width:768px) {
    .media-grid:nth-of-type(2n) {
        grid-template-areas: "bigImg bigImg smallImg1 smallImg2""bigImg bigImg smallImg3 smallImg4"
    }
}