.body {
        background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('pexels-pixabay-258149.jpg');
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: fixed;
        
}

.main {
    display: flex;
    justify-content: center;
}

.grid-container {
    display: grid;
    grid-template-areas:
        "header header header header"
        "hero hero hero hero"
        "p1 p2 p3 p4"
        "p1 p2 p3 p4"
        "footer footer footer footer";
}

div {
    border:1px solid black;
    text-align: center;
}

.header {
    grid-area: header; 
    grid-column: 1 / span 4;
    grid-row: 1 / span 1;
    display: flex;
    text-align: center;
    justify-content: center;
    font-family: 'freckle face', cursive;
    font-size: xx-large;
}

.hero { 
    grid-area: hero; 
}

img {
    width: 200px;
    height: auto;
}

.p1 { 
    grid-area: p1; 
    grid-column: 1 / span 1;
    grid-row: 3 / span 2;
    font-family: 'roboto', sans-serif;
}

.p2 { 
    grid-area: p2; 
    grid-column: 2 / span 1;
    grid-row: 3 / span 2;
    font-family: 'roboto', sans-serif;
}
.p3 { 
    grid-area: p3; 
    grid-column: 3 / span 1;
    grid-row: 3 / span 2;
    font-family: 'roboto', sans-serif;}
.p4 { 
    grid-area: p4; 
    grid-column: 4 / span 1;
    grid-row: 3 / span 2;
    font-family: 'roboto', sans-serif;
}
.footer { 
    grid-area: footer; 
    grid-column: 1 / span 4;
    grid-row: 5 / span 1;
    font-family: 'roboto flex', sans-serif;
    font-size: small;
}