main {
    display: grid;
    grid-template-areas:
    "h1 h1 h1 h1"
    "hero hero hero hero"
    "art1 art2 art3 art4"
    "footer footer footer footer" ;

    border: 1px solid #000000;
    background-color: rgba(255, 255, 255, 0.3);
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr auto;
    
}

body {
    background-image: url('2026-zr1x2.0.png');
    background-repeat: no-repeat;
    background-size: cover;
}

h1 {
    grid-area: h1;
    text-align: center;
    font-size: 75px;
    border: 1px solid #000000;
}

img {
    grid-area: hero;
    margin-left: auto;  
    margin-right: auto;
    width: 75%;
    height: 75%;
    border: 1px solid #000000;
}

#art1 {
    grid-area: art1;
    border: 1px solid #000000;
}

#art2 {
    grid-area: art2;
    border: 1px solid #000000;
}

#art3 {
    grid-area: art3;
    border: 1px solid #000000;
}

#art4 {
    grid-area: art4;
    border: 1px solid #000000;
}

footer {
    grid-area: footer;
    text-align: center;
    border: 1px solid #000000;
}

h1.roboto {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: weight;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

.zalando-sans {
  font-family: "Zalando Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: weight;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

header {
    margin: 10px;
    font-size: 25px;
}

p {
    margin: 10px;
}