// Layout only.
.footer--container,
.below-footer--container {
  @include grid();
  margin: 0 auto;
  padding: $grid-gutter 0;
}

.footer--container {
  background: $color-bg-dark;
  padding: (2 * $grid-gutter) 0 $grid-gutter;

  @include breakpoint(m) {
    padding: (3 * $grid-gutter) 0 $grid-gutter;
  }
}

// Content.
.footer {
  background: $color-neutral-canvas;
}

.region-footer {
  display: block;
  position: relative;
  z-index: 2;
  grid-column: 2 / 16;

  @include breakpoint(m) {
    margin: 0 (-0.5 * $grid-gutter) 0 (-0.5 * $grid-gutter);
  }

  @include breakpoint(m) {
    display: flex;
    flex-wrap: wrap;
  }

  > .block {
    min-width: 10rem;
    flex-grow: 1;
    flex-basis: 0;
    margin: 0 0 $grid-gutter 0;

    @include breakpoint(m) {
      margin: 0 (.5 * $grid-gutter) $grid-gutter;
    }

    > *:first-child {
      margin-top: 0;
    }
  }

  .block--title {
    margin-bottom: $grid-gutter;
  }

  h2,
  h3 {
    font-family: $font-base;
    font-size: $font-size-l;
  }
}

.region-below-footer {
  display: block;
  position: relative;
  z-index: 2;
  grid-column: 2 / 16;

  @include breakpoint(m) {
    margin: 0 (-0.5 * $grid-gutter) 0 (-0.5 * $grid-gutter);
  }

  @include breakpoint(m) {
    display: flex;
    flex-wrap: wrap;
  }

  h2, h4, p, span {
    display: inline-block;
    font-size: $font-size-s;
  }
}
