html {
    font-family: sans-serif;
}

* {
    box-sizing: border-box;
}

body {
    min-width: 375px;
    margin: 0;
}

.container {
    max-width: 1280px;
    padding: 0 15px;
    margin: 0 auto;
}

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

.header {
    background-color: #e4b8b8;
    grid-column: 12 span;
}

.aside {
    background-color: #7d9c9b;
    grid-column: 2 span;
}

.main {
    background-color: #A7BCBD;
    grid-column: 3 / 10 span;
}

.footer {
    background-color: #ca7589;
    grid-column: 12 span;
}
.main .container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 300px);
    grid-auto-rows: 300px;
    gap: 15px;
    padding: 40px;
    justify-content: center;
    align-content: center;
}

.article {
    background-color: #EDECDB;
}
@media (width <= 1200px) {
    .main .container{
        grid-template-columns: repeat(3, 1fr);
    }
    .aside {
        grid-column: 3 span;
    }
    .main {
        grid-column: 4 / 9 span;
    }
    .wrapper{
        grid-template-rows: repeat(3, 1fr 9fr)
    }
}
@media (width <= 768px) {
    .aside {
        display: none;
    }
    .main .container{
        grid-template-columns: repeat(2, 1fr);
    }
    .main {
        grid-column: 12 span;
    }
    .wrapper{
        grid-template-rows: repeat(3, 1fr 12fr)
    }
}
@media (width <= 480px){
    .main .container{
        grid-template-columns: repeat(1, 1fr);
    }
    .wrapper{
        grid-template-rows: repeat(3, 1fr 24fr)
    }
}