main {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    gap: 10px;
}

main .block {
    padding: 20px;
    font-size: 4em;
    font-weight: bold;
    text-align: center;
    color: white;
}

.block1 {
    background-color: #b6366a;
}

.block2 {
    background-color: #726ea6;
}

.block3 {
    background-color: #7d8dc2;
}

.block4 {
    background-color: #a1d2da;
}

@media (min-width: 320px) {
    .block2 {
        grid-row: 1;
    }

    .block1 {
        grid-row: 2;
    }
}

@media (min-width: 772px) {
    .block3 {
        grid-row: 2;
    }

    .block2 {
        grid-row: 3;
    }

    .block1 {
        grid-row: 1;
    }
}

@media (min-width: 992px) {
    main {
        grid-template-columns: 1fr 2fr;
    }

    .block1,
    .block2 {
        grid-column: 1 / 3;
    }

    .block2 {
        grid-row: 2;
    }

    .block3,
    .block4 {
        grid-row: 3;
    }
}