/* 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;*/
  }
  .showcase {
    grid-area: showcase;
  }
  .events {
    grid-area: events;
    min-height: 0;
  }
  .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-rows: auto auto auto 225px auto auto auto;*/
    grid-template-areas:
      "header"
      "nav"
      "showcase"
      "events"
      "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-rows: auto auto auto 0px auto auto auto;
      grid-template-areas:
        "header  header"
        "nav     nav"
        "showcase showcase"
        "sidebar events"
        "sidebar content"
        "footer  footer";
    }
  }
}