*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    /* padding: 20px; */
    min-height: 100vh;
    font-size: 1.2rem;
    font-family: sans-serif;
}

.grid-container > * {
    box-shadow: 10px 6px 37px -13px rgba(51, 51, 51, 0.74);
    padding: 20px;
    
    text-align: center;
}

.grid-container {
    display: grid;
    /* gap: 20px; */

    grid-template:
    'header'
    'navbar'
    'sidebar'
    'main'
    'footer'
    
    ;
    
    .header{
        background-color: antiquewhite;
        grid-area: header;
    }
    .navbar{
        grid-area: navbar;
        background-color: rgb(182, 235, 217);
    }
    .sidebar{
        grid-area: sidebar;
        background-color: rgb(183, 183, 252);
    }
    
    .main{
        grid-area: main;
        background-color: rgb(181, 165, 196);
        display: flex;
        gap: 20px;
        flex-wrap: wrap;
        align-items: center;
        
        
    }

    .element{
        background-color: red;
        min-height: 200px;
        flex: 1 1 150px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .footer{
        grid-area: footer;
        background-color: rgb(193, 136, 136);
    }

    @media (min-width: 768px){
        grid-template: 
        'header navbar' 50px
        'header navbar' 50px
        'sidebar main'  auto
        'footer footer' 100px / 100px
        ;
    }

    @media (min-width: 992px){
        grid-template: 
        
        'header header header' 100px
        'navbar  main  sidebar'
        'footer footer footer' 100px /
        100px auto 100px
        
        
        ;
    }
}