html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  font-family: Helvetica;
}

.container {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 275px auto 300px;
  grid-template-rows: 70px auto 50px;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "sidebar footer footer";
}

@media all and (max-width: 850px) {
  .container {
    grid-template-columns: auto auto;
    grid-template-rows: 70px auto 50px;
    grid-template-areas:
      "header sidebar"
      "main main"
      "footer footer";
  }
}

.sidebar {
  background-color: orange;
  grid-area: sidebar;
}

.header {
  background-color: forestgreen;
  grid-area: header;
}
.mainContainer{
  grid-area: main;
  display: flex;
  background-color: teal;
  justify-content: center;
}

.main {
  width: 100%;
  display: grid;
  box-sizing: border-box;
  padding: 1rem;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto;
  max-width: 1024px;
}



.card {
  align-self: start;
  color: #333;
  box-sizing: border-box;
  display: flex;
  background-color: white;
  border: 1px solid lightgray;
  min-height: 8rem;
  margin: 1rem;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
}

.col-1 {grid-column-end: span 1;}
.col-2 {grid-column-end: span 2;}
.col-3 {grid-column-end: span 3;}
.col-4 {grid-column-end: span 4;}
.col-5 {grid-column-end: span 5;}
.col-6 {grid-column-end: span 6;}
.col-7 {grid-column-end: span 7;}
.col-8 {grid-column-end: span 8;}
.col-9 {grid-column-end: span 9;}
.col-10 {grid-column-end: span 10;}
.col-11 {grid-column-end: span 11;}
.col-12 {grid-column-end: span 12;}

@media all and (max-width: 1100px) {
.col-1, .col-2 {grid-column-end: span 2;}
.col-3, .col-4 {grid-column-end: span 4;}
.col-5, .col-6 {grid-column-end: span 6;}
.col-7, .col-8, .col-9 {grid-column-end: span 8;}
.col-10, .col-11 {grid-column-end: span 10;}
.col-12 {grid-column-end: span 12;}
}

@media all and (max-width: 950px) {
.col-1, .col-2 {grid-column-end: span 3;}
.col-3, .col-4, .col-5, .col-6 {grid-column-end: span 6;}
.col-7, .col-8, .col-9 {grid-column-end: span 9;}
.col-10, .col-11 {grid-column-end: span 12;}
.col-12 {grid-column-end: span 12;}
}

@media all and (max-width: 700px) {
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {grid-column-end: span 12;}
}



.footer {
  background-color: orangered;
  grid-area: footer;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  box-sizing: border-box;
  padding: 1rem
}