
* { 
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 24px;
    font-weight: bold;
}

.wrapper {
    height: 100vh;
    background-color: white;
}

.container {
    display: grid;
    height: 100vh;
    grid-template-columns: 25% auto;
    grid-template-rows: 20% auto 10%;
    grid-template-areas: 
        "header header"
        "aside article"
        "footer footer"
    ;
    grid-gap: 5px;
}

header {
    grid-area: header;
    background-color: rgb(28, 28, 82);
    color: white;
    padding: 20px;
}

aside {
    grid-area: aside;
    background-color: rgb(87, 87, 121);
    color: white;
    padding: 20px;
}

article {
    grid-area: article;
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-gap: 5px;
    background-color: rgb(176, 176, 206);
    padding: 20px;
}

article div {
    background-color: rgb(135, 135, 161);
    height: 100px;
    align-self: end;
    padding: 20px;
}

footer {
    grid-area: footer;
    background-color: rgb(61, 61, 139);
    color: white;
    padding: 20px;
}




/* ======= Responsive/Responsividade ======= */
@media (max-width: 991px){

    html {
        font-size: 55%;
    }

}

@media (max-width: 768px){


}

@media (max-width: 450px){

    html {
        font-size: 50%;
    }

}