#footer {
  padding: 40px 0 0 0;
  color: var(--white);
  background: linear-gradient(0deg, var(--primary-dark), var(--black));

  @media (min-width: $screen-xs-min) {
    .container {
      padding: 0 40px;
    }

    .region-footer {
      display: grid;
      grid-template-columns: repeat(2, 1fr);

      .block-system-branding-block {
        grid-column: 1 / span 2;
      }
    }
  }

  @media (min-width: $screen-md-min) {
    padding: 80px 0 0px 0;

    .container {
      padding: 0 50px;
    }

    .region-footer {
      display: flex;
      gap: 40px;
    }
  }

  @media (min-width: $screen-lg-min) {
    .container {
      padding: 0;
    }
  }
}
