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

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

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

// Content
.footer {
  background: var(--color-neutral-canvas);
}

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

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

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

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

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

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

  .block--title {
    margin-bottom: var(--grid-gutter);
  }

  h2,
  h3 {
    font-family: var(--font-base);
    font-size: var(--font-size-l);
  }
}

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

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

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

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