#grid{
    width:100%;
    height:100%;

    margin:0 auto;
    padding:var(--gapWidth);
    padding-bottom: calc(var(--gapWidth) + var(--footerHeight));
    
    display:grid;
    grid-template-columns: calc(var(--borderWidth) + var(--gapWidth)) 16rem calc(var(--borderWidth) + var(--gapWidth)) var(--gapWidth) calc(var(--borderWidth) + var(--gapWidth)) 1fr calc(var(--borderWidth) + var(--gapWidth)) var(--gapWidth) calc(var(--borderWidth) + var(--gapWidth)) 16rem calc(var(--borderWidth) + var(--gapWidth));
    grid-template-rows: calc(var(--borderWidth) + var(--gapWidth)) 1fr var(--gapWidth) 1fr calc(var(--borderWidth) + var(--gapWidth));
    grid-template-areas:
    "nav1  ..... ..... ..... main1 ..... ..... ..... asid1 ..... ....."  
    ".....  nav  ..... ..... ..... main  ..... ..... ..... nowpl ....."
    ".....  nav  ..... ..... ..... main ..... ..... ..... ..... ....."
    ".....  nav  ..... ..... ..... main ..... ..... ..... recpl ....."
    "..... ..... nav2  ..... ..... ..... main2 ..... ..... ..... ....."
    ;
}
#nav-trim{ grid-row:nav1 / nav2; grid-column:nav1 / nav2; }
#nav-bg{ grid-row:nav1 / nav2; grid-column:nav1 / nav2; }

#main-trim{ grid-row: main1 / main2; grid-column: main1 / main2; }
#main-bg{ grid-row: main1 / main2; grid-column: main1 / main2; }

#aside-trim{ grid-row: asid1 / asid2; grid-column: asid1 / asid2; }
#aside-bg{ grid-row: asid1 / asid2; grid-column: asid1 / asid2; }

#nav-container{ grid-area:nav; }
#playlist-container{ grid-area: main; }
#nowplaying-container{ grid-area:nowpl; }
#recentlyplayed-container{
    grid-area:recpl;
    display:flex;
    align-items: end;
}

#recentlyplayed-container > article{
    bottom:0;
}

#playlist-container > article{
    flex-direction: column;
}

#playlist-ul {
    border-radius: var(--insideBorderRadius);
    overflow-y:auto;
    padding:0;
}

#playlist-ul li{
    display:flex;
    align-items:baseline;
    gap:1rem;
    padding: 0.5rem;
}

#playlist-ul .like-dislike{
    width:20%;
    margin-left:auto;
}

#playlist-ul li:nth-child(2n + 1) {
    background-color:var(--color-faded-lightblue);
}

@media screen and (max-width: 768px) {
    /* SMALL SCREEN */
    #grid{
        padding-bottom:calc(var(--borderWidth) + calc(calc(var(--gapWidth) * 2) + 20vw));
        grid-template-columns: calc(var(--borderWidth) + var(--gapWidth)) 1fr calc(var(--borderWidth) + var(--gapWidth));
        grid-template-rows: calc(var(--borderWidth) + var(--gapWidth)) fit-content calc(var(--borderWidth) + var(--gapWidth));
        grid-template-areas:
        "main1 ..... ....."  
        "..... main  ....."
        "..... ..... main2"
        ;
        height:fit-content;
        gap:0;
    }

    #nav-bg{display:none;}
    #nav-trim{display:none;}
    #aside-bg{display:none;}
    #aside-trim{display:none;}

    #recentlyplayed-container{display:none;}
    #nowplaying-container{display:none;}

    #nav-container{display:none;}

    #playlist-controls h1{
        text-align: center;
    }

    #playlist-day-controls{
        justify-content: center;
    }

    #playlist-ul li{
        display: initial;
    }

    #playlist-container{
        margin: calc(var(--borderWidth) + var(--gapWidth)) 0;
    }

    #playlist-container header{
        display:initial;
    }

    #playlist-ul .like-dislike{
        margin:auto;
        width:fit-content;
    }

    .like-dislike button{
        width: initial;
    }
}