.container {
  display: grid;
  grid-template-areas:
    "header header header"
    "left content right"
    "footer footer footer";
  grid-template-columns: 1fr 3fr;
  gap: 5px;
  padding: 5px;
}
.container > div {
  background-color: rgba(255, 255, 255, 0.8);
  padding: 10px;
}
.container > div.header {
  grid-area: header;
  text-align: center;
}
.container > div.left {
  grid-area: left;
  justify-content: center;
  text-align: center;
}
.container > div.content {
  grid-area: content;
  text-align: center;
}
.container > div.right {
  grid-area: right;
  text-align: center;
}
.container > div.footer {
  grid-area: footer;
}
/* Responsive layout - when the screen is less than 600px wide, make the three columns stack on top of each other instead of next to each other */
/*@media only screen and (max-width: 600px)  {*/
@media screen and (max-width: 600px)  {
    .container {
      display: contents;

    }
    .container > div.left {
      width: 100%;
      align: center;
    }
    .container > div.content {
      width: 100%;
    }
    .container > div.right {
          width: 100%;
    }
}