main{
    display: grid;
    grid-template-areas:
    "header header header header"
    "image image image image"
    "art1 art2 art3 art4"
    "footer footer footer footer";
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows:auto auto auto auto;
    border: 2px solid black;
    margin: 2rem auto;
    padding: 0;
}

h1{
    grid-area:header;
    border: 2px solid black;
    text-align: center;
    margin: 0 ;
    padding: 1.5rem 0;
    border-top: none;}


.m-plus-rounded-1c-regular {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 400;
  font-style: normal;
}


img{
    grid-area:image;
    border: 2px solid black;
    margin: 0;
    border-top: none;
    width: 100%;
    height: auto;
    display: block;
    padding: 0;
}

footer{
    margin:0;
    grid-area:footer;
    border: 2px solid black;
}

#art1{
    grid-area: art1;
    border: 2px solid black;
    text-align: center;
    margin: 0;
    padding: 0;
}

#art2{
    grid-area: art2;
    border: 2px solid black;
    text-align: center;
    margin: 0;
    padding: 0;
}

#art3{
    grid-area: art3;
    border: 2px solid black;
    text-align: center;
    margin: 0;
    padding: 0;
}

#art4{
    grid-area: art4;
    border: 2px solid black;
    text-align: center;
    margin: 0;
    padding: 0;
}

.press-start-2p-regular {
  font-family: "Press Start 2P", system-ui;
  font-weight: 400;
  font-style: normal;
}


.m-plus-rounded-1c-regular {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 400;
  font-style: normal;
}