.container {
  display: grid;
  grid-template-areas:
  'header header header header'
  'image image image image'
  'area1 area2 area3 area4'
  'footer footer footer footer';
  grid-gap: 10px;
  background-color: #f32121;
  padding: 10px;
}

.container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
}
.container > .header {
  font-family: "Dancing Script", cursive;
  font-optical-sizing: auto;
  font-weight: 24px;
  font-style: normal;
  font-size: 32px;
  grid-area: header;
}

.container > .image {
  grid-area: image;
}

.container > .area1 {
  grid-area: area1;
  font-size: 16px;
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

.container > .area2 {
  grid-area: area2;
  font-size: 16px;
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

.container > .area3 {
  grid-area: area3;
  font-size: 16px;
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

.container > .area4 {
  grid-area: area4;
  font-size: 16px;
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

.container > .footer {
  grid-area: footer;
  font-size: 12px;
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: italic;
  font-variation-settings:
    "wdth" 100;
}

main {
    text-align: center;
    justify-content: center;
    vertical-align: middle;
}