/* ----------------------------  */
/* ==Layout classes              */
/* ----------------------------- */

/* Global container */
.layout-maxed {
  padding: 0 2rem;
  max-width: $extra-large;
  margin: 0 auto;
  padding: 0;
  @include respond-to("small-up") {
    display: grid;
    @each $key, $value in $breakpoints {
      @media (min-width: #{$value}) {
        grid-template-columns:
          minmax($spacer-medium, 1fr)
          minmax(auto, $value)
          minmax($spacer-medium, 1fr);
      }
    }
  }
}
main.left-bar-is-displayed .layout-maxed,
header.left-bar-is-displayed .layout-maxed {
  position: relative;
  margin-left: 1rem;
  margin-right: 1rem;
  max-width: calc(100vw - 200px);
  left: 160px;
  @media screen and (min-width: 1024px) {
    left: 200px;
    max-width: calc(100vw - 240px);
  }
}
.layout-halfed {
  @include respond-to("large-up") {
    @each $key, $value in $breakpoints {
      @media (min-width: #{$value}) {
        max-width: $value / 2;
      }
    }
    margin: 0 auto;
  }
}

/* Center all children */
.layout-maxed > * {
  grid-column: 2;
}

/* Hero box  */
.layout-hero {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: inherit;
}

.layout-hero > * {
  grid-column: 2;
}

/* Hero image */
.layout-hero-img {
  grid-column: 1 / -1;
  justify-self: center;
  max-width: 100%;
}