/*Global*/
.main p::first-letter {
  color: #FF5335;
  float: left;
  font-family: Georgia;
  font-size: 75px;
  line-height: 60px;
  padding-top: 4px;
  padding-right: 8px;
  padding-left: 3px;
}

/*Layout*/
.page {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
        "navbar "       
        "header "
        "main"
        "footer"
        "gutter-left"
        "gutter-right";
 }

@media screen and (min-width: 500px) {    
    .page {
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-areas:
            "navbar navbar navbar navbar"       
            "header header header header"
            "main main main main"
            "footer footer footer footer"
            "gutter-left gutter-left gutter-right gutter-right";        }
}

@media screen and (min-width: 1024px) {    
    .page {
        display: grid;
        grid-template-columns: 10% 1fr 1fr 1fr 1fr 10%;
        grid-template-rows: auto;
        grid-template-areas:
            "gutter-left navbar navbar navbar navbar gutter-right"       
            "gutter-left header header header header gutter-right"
            "gutter-left main main main main gutter-right"
            "gutter-left footer footer footer footer gutter-right";
        }
}


.landingfloat{
    float: left;
    margin: 2rem;
    }

@media screen and (min-width: 1024px) {  
    .main p{
        padding-right:15%;
        padding-left:15%;
    }

    .landingfloat{
        padding-left:15%;
    }
}