* {
    box-sizing: border-box;
}

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

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

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

.header {
    min-height: 80px;
    grid-column: 1 / 12 span;
    background-color: #dd1212;
}

.aside {
    grid-column: 1 / 2 span;
    min-height: 500px;
    background-color: #ebeb0c;
}

.main {
    grid-column: 3 / 10 span ;
    background-color: rgba(0, 128, 0, 0.695);
}

.container {
    display: grid;
    gap: 15px;
    grid-template-columns: repeat(4 , 1fr);
}

.article {
    min-height: 301px;
    grid-column: 1 , 2;
    background-color: #ff8400ce;
}

.footer {
    grid-column: 1 / 12 span;
    min-height: 149px;
    background-color: #0000ff;
}

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

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

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

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

@media ( width <= 756px) {
    .aside {
        display: none;
    }

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

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