:root{
    
}

body{
    margin:0px;
    padding: 0px;
}

header{
    grid-area: header;
}

nav{
    background-color: violet;
    grid-area: nav;
    height: 40px;
}

main{
    grid-area: main;
    /* background-color: tomato; */
    display: flex;
    flex-direction: column;
}

footer{
    /* background-color: aquamarine; */
    grid-area: footer;
}

.container{
    height: 100%;
    width: 100%;
    display: block;
}

.page-container > aside, .container > main {
    border-radius: 3px;
    box-shadow: 1px 1px 3px 0 rgba(32, 33, 36, .08);

}

.page-container{
    width: 100%;
    height: auto;
    background-color: whitesmoke;
    display: grid;
    grid-gap: 5px;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: "header header"
                         "aside main"
                         "footer footer";
}

.filter-box{
    display: none;
}

@media (max-width: 750px) {
    aside{
        position: -webkit-sticky;
        position: sticky;
        top: 60;
        z-index: 9999;
    }

    .product-demo{
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 5px;
        padding-left: 0px;
    }

    .page-container{
        grid-template-rows: auto auto 1fr auto;
        grid-template-areas: "header header"
                             "aside aside"
                             "main main"
                             "footer footer";
    }

    .product{
        min-width: 100%;
        max-width: 100%;
        background-color: white;
        display: flex;
        flex-direction: column;
        align-content: start;
        align-items: start;
        justify-content: start;
        justify-items: start;
        border-radius: 3px;
    }

    .page-container > aside, .container > main {
        border-radius: 0px;
        box-shadow: 0 0px 0px 0 rgba(32, 33, 36, .08);
    }

    .filters{
        border-radius: 0px;
    }

    .sort ul, .sort li{
        padding: 0px;
        margin: 0px;
    }

    .sort{
        font-size: 12px;
        width: 100%;
        margin-left: 0px;
        background-color: white;
        position: -webkit-sticky; /* Safari */
        position: sticky;
        top: 116;
        display: flex;
        justify-content: space-between;
        justify-items: center;
        align-content: center;
        align-items: center;
        box-shadow: 0px 3px 3px 0 rgba(32, 33, 36, .08);
        z-index: 99999;
        margin-bottom: 10px;
        
    }
}