/* 
breakpoints:
xs: 480px;
*/


:root {
  --su: 2.6rem; /* spacing unit */
  --border-radius: 0.5rem;
  --max-width: 66rem; /* max width for the main content */
}


header, main, footer {
  display: grid;
  grid-template-columns:
    1fr
    min(var(--max-width), 100%)
    2fr;
  padding: var(--su);
}

header > *, main > *, footer > * {
  grid-column: 2;
}

.full-width {
  grid-column: 1 / -1;
}

.left-column {
  grid-column: 1;
}

/* xs */
@media (max-width: 480px) {
  header .hide-xs {
    display: none;
  }
  header .show-xs {
    display: block;
  }
  header nav ul {
    flex-direction: column;
  }

  header,
  footer,
  main {
    padding: calc(var(--su) / 1.5);
  }
}

.show-xs {
  display: none;
}