main {
    display: grid;
    /* sets up the layout of the grid */
    grid-template-areas:
        "headline headline headline headline"
        "hero hero hero hero"
        "p1 p2 p3 p4"
        "foot foot foot foot";
    grid-template-rows: 1fr 3fr 4fr 1fr;
    
    /* sets up the size of the columns */
    grid-template-columns: 1fr 1fr 1fr 1fr;

    margin-left: 10%;
    margin-right: 10%;

    column-gap: 0px;
    row-gap: 0px;
    text-align: center;
}
#header{
    grid-area: headline;
}

#hero{
    grid-area: hero;
    align-items: center;
    
}
img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
#p1{
    grid-area: p1;
}
#p2{
    grid-area: p2;
}
#p3{
    grid-area: p3;
}
footer{
    grid-area: foot;
}
#p4{
    grid-area: p4;
}
main > * {
    border: 1px solid black;
}

.oswald {
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: <70>;
  font-style: normal;
}

.ubuntu-regular {
  font-family: "Ubuntu", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.ubuntu-medium {
  font-family: "Ubuntu", sans-serif;
  font-weight: 500;
  font-style: normal;
}