/* Global variables for colors and sizes */
@import url("../variables.css");

/* Uses grid layout if supported */
@supports (display: grid) {
  .main-head {
    grid-area: header;
    /*display: grid;*/
  }
  .content {
    grid-area: content;
  }
  .main-nav {
    grid-area: nav;
  }
  .side {
    grid-area: sidebar;
  }
  .main-footer {
    grid-area: footer;
  }

  /* Mobile/default layout */
  .wrapper {
    display: grid;
    /*grid-gap: 20px;*/
    grid-template-areas:
      "header"
      "nav"
      "sidebar"
      "content"
      "footer";
  }
  /* Uses a two-column layout from 600px on */
  @media (min-width: 800px) {
    .wrapper {
      grid-template-columns: var(--sidebar-frac) var(--content-frac);
      grid-template-areas:
        "header  header"
        "nav     nav"
        "sidebar sidebar"
        "content content"
        "footer  footer";
    }
  }
}