header, main, footer {
  margin: 6px 0;
  padding: 6px;
  gap: 6px;
  width: 100%;
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: 12px;
  border: 1px solid var(--color-border);
  align-self: center;
  text-align: left;
  align-items: stretch;
  align-content: stretch;
  justify-content: stretch;
}

header {
  grid-area: g_header;
  min-height: 112px;
  background-image: url("../img/header_bg.jpg");
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  gap: 6px;
  display: grid;
  grid-template-columns: 100px auto;
  grid-template-areas: "header_1 header_2" "header_3 header_3";
}

main {
  grid-area: g_main;
  gap: 6px;
  display: grid;
  grid-template-columns: 100%;
  grid-template-areas: "main_1" "main_2" "main_3" "main_4" "main_5" "main_6";
}


footer {
  grid-area: g_footer;
  min-height: 50px;
  gap: 6px;
  display: grid;
  grid-template-columns: 100%;
  grid-template-areas: "footer_1" "footer_2" "footer_3";
}

section {
  min-height: 40px;
  width: 100%;
  padding: 6px;
  background: var(--color-border);
  color: var(--color-text);
  border-radius: 12px;
  border: 1px solid var(--color-surface);
  text-align: left;
  align-content: stretch;
  justify-content: stretch;
  align-items: left; 
  float: none;
  clear: none;
}

article {
  min-height: 20px;
  width: 100%;
  padding: 6px;
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: 12px;
  border: 1px solid var(--color-border);
  text-align: left;
  align-content: stretch;
  justify-content: stretch;
  align-items: left;
  float: none;
  clear: none; 
}


@media (min-width: 600px) {
  header {
    grid-template-columns: 100px 300px auto;
    grid-template-areas: "header_1 header_2 xx" "header_3 header_3 header_3";
  }
  main {
    grid-template-columns: 100%;
    grid-template-areas: "main_1" "main_2" "main_3" "main_4" "main_5" "main_6";
  }
  footer{
    grid-template-columns: 100%;
    grid-template-areas: "footer_1" "footer_2" "footer_3";
  }
}

@media (min-width: 1000px) {
  header {
    grid-template-columns: 100px 300px 50px auto;
    grid-template-areas: "header_1 header_2 xx header_3";  
  }
  main {
    grid-template-columns: 50% auto;
    grid-template-areas: "main_1 main_1" "main_2 main_3" "main_4 main_5" "main_6 main_6";
  }
  footer{
    grid-template-columns: 33% 33% auto;
    grid-template-areas: "footer_1 footer_2 footer_3";
  }
}