container {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
  grid-template-rows: 80px 1fr 80px;
  grid-template-areas: 
    "hd"
    "main"
    "ft";
}

.container {
  border: 6px ridge;
  border-color: #3da1aa;
  outline: 6px solid;
  outline-color: #1d2830;
  border-radius: 15px;
  margin-top: 90px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 90px;
  padding: 10px;
  width: 1125px;
}

@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
      "hd"
      "main"
      "ft";
  }
}

header { 
  grid-area: hd; 
  background: #3498db; 
  padding: 10px; 
}

main {
  grid-area: main; 
  background: #ffffff;
  padding: 10px; 
}

/* .sidebar-l { 
  grid-area: sd-l; 
  background: #f4f4f4; 
  padding: 10px; 
} */

footer { 
  grid-area: ft; 
  background: #333333;
  padding: 10px;
}