* {
    box-sizing: border-box;
}

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

.wrapper {
    display: grid;

    grid-template: [header] 100px [header-end 
    main] 1fr [main-end 
    footer] 150px [footer-end] 
    /
    [start] minmax(200px, 1fr) [aside-end 
    main-start] repeat(5, 1fr) [end];

    min-width: 100%; 
    min-height: 100%; 
}

.header {
    grid-area: header/start/header-end/end;
    background-color: rgb(187, 71, 183);
    max-height: 200px;
}

.aside {
    grid-area: main/start/main-end/aside-end;
    background-color: rgb(94, 162, 129);
}

.main {
    grid-area: main/main-start/main-end/end;
    background-color: rgb(162, 120, 94);
    padding: 20px;
}

.footer {
    grid-area: footer/start/footer-end/end;
    background-color: rgb(103, 94, 162);
}

.container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(284px, 1fr));
    grid-auto-rows: minmax(320px, 350px);
    place-items: center;
    gap: 20px;
    max-width: 1280px;
    margin: 0 auto;
}

.article {
    background-color: rgb(103, 94, 162);
    border: 2px solid #111;
    width: 100%;
    height: 100%;
    max-width: 450px;
}

@media(width<1440px) {
    .wrapper {
        grid-template: [header] 100px [header-end 
        main] 1fr [main-end 
        footer] 150px [footer-end] 
        /
        [start] minmax(150px, 250px) [aside-end 
        main-start] repeat(5, 1fr) [end];
    }

}

@media (width<1050px) {
    .wrapper {
        grid-template: [header] 80px [header-end 
        main] 1fr [main-end 
        footer] 100px [footer-end] 
        /
        [start] minmax(100px, 250px) [aside-end 
        main-start] repeat(5, 1fr) [end];
    }
}

@media(width<768px){
    .aside {
        grid-area: none;
        background-color: none;
        display: none;
    }

    .main {
        grid-area: main/start/main-end/end;
        background-color: rgb(162, 120, 94);
        padding: 20px;
    }
}