body {
    min-width: 375px;
}

/* =================================== */

.grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
}

.header {
    background: rgb(202, 0, 0);
    grid-column: 1/ 12 span;
    height: 10vh;
}

.aside {
    background: yellow;
    grid-column: 1 / 2 span;
}

.main {
    display: flex;
    justify-content: center;
    background: green;
    grid-column: 3 / 10 span;
}

.main__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 20px;
    width: 80%;
}

.main__element {
    background: brown;
    height: 200px;
}

.footer {
    background: blue;
    grid-column: 1 / 12 span;
    height: 20vh;
}

/* ========================================== */

@media(width<=1200px) {
    .main__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .aside {
        grid-column: 1 / 3 span;
    }

    .main {
        grid-column: 4 / 9 span;
    }
}

@media(width<=762px) {
    .main__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .aside {
        display: none;
    }

    .main {
        grid-column: 1 / 12 span;
    }
}

@media(width<=576px) {
    .main__grid {
        grid-template-columns: repeat(1, 1fr);
    }
}