/********************************** Grid Layout **********************************/
.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: auto auto auto auto;
    grid-template-areas: 'header header header header header' 'screen1 screen2 screen3 screen4 screen5' 'about about about about about' 'policy policy policy policy policy';
    grid-row-gap: 1em;
    margin-left: 15%;
}

#grid-head{
    grid-area: header;
}
#grid-screenshot1 {
    grid-area: screen1;
}
#grid-screenshot12 {
    grid-area: screen2;
}
#grid-screenshot3 {
    grid-area: screen3;
}
#grid-screenshot4 {
    grid-area: screen4;
}
#grid-screenshot5 {
    grid-area: screen5;
}
#grid-about{
    grid-area: about;
}
#grid-privacy {
    grid-area: policy;
}


/********************************** Preview Items **********************************/


p.pages {
    color: black;
}

h3.pages {
    color: black;
}

ul.pages {
    color: black;
}
.gridsize {
    width: 90%;
}

/*********************** Mobile Layout ***************************/
@media screen and (max-width: 1000px) {
    .grid-container {
        margin-left: 18.5%;
        margin-right: 1.5%;
    }
    img .gridsize{
      width: 95%;
    }
    p.pages {
        font-size: 87.5%;
    }

    h3.pages {
        font-size: 82.5%;
    }

    ul.pages {
        font-size: 82.5%;
    }
    h1{
        font-size: 112.5%;
    }
    h2{
        font-size: 100%;
    }
    h3{
        font-size: 92.5%;
    }
    p {
        font-size: 87.5%;
    }
    ul {
        font-size: 82.5%;
    }
}