.theme-footer {
  margin: 6rem -1rem;
  padding: 0;

  .contact,
  .newsletter,
  .social,
  .logo {
    padding-top: 1.4rem;
    padding-bottom: 1.4rem;

    @include tablet {
      padding-top: 2.4rem;
      padding-bottom: 2.4rem;
    }
  }

  .logo {
    flex-shrink: 0;
    text-align: center;

    @include tablet {
      margin-right: 2rem;
      text-align: left;
    }

    img {
      width: auto;
      height: 10rem;
    }

    + .social,
    + .contact {
      padding-top: 0;

      @include tablet {
        padding-top: 2.4rem;
      }
    }



    + .newsletter {
      padding: 40px 30px;

      @include tablet {
        padding: 60px 70px;
      }
    }
  }

  .contact {
    @include medium-text();
    margin-right: auto;

    @include desktop {
      padding-right: 40px;
    }

    h3 {
      margin-bottom: 30px;
    }

    .icon-list {
      @include medium-text();
      margin: 0;

      @include desktop {
        column-gap: $gutter-width * 2;
        column-count: 2;
      }

      li:last-of-type {
        margin-bottom: 0;
      }

      li:not(:first-of-type) {
        i {
          @include theme('color', 'color-primary', 'link-color');
        }
      }
    }

    &:only-child .icon-list {
      @include tablet {
        column-count: 2;
      }
    }
  }

  .social {
    @include tablet {
      flex-shrink: 0;
      width: 386px;

      &:only-child {
        width: auto;
      }
    }

    h4 {
      max-width: 100%;
      margin-top: 0;
      margin-bottom: 10px;
    }

    .social-list {
      ul {
        width: calc(100% + 20px);

        a {
          &,
          &[download]:not(.button),
          &[href^="http://"]:not(.button):not([href*="gent.be"]),
          &[href^="https://"]:not(.button):not([href*="gent.be"]) {
            @include theme('background-color', 'button-secondary-background');
          }
        }
      }

      li {
        margin-bottom: 0;
        padding: 0 10px 0 0;

        &:last-child {
          padding-right: 0;
        }
      }
    }
  }

  .newsletter {
    @include medium-text;
    flex-grow: 1;
    padding: 30px;

    @include desktop {
      max-width: 768px;
      padding: 60px 70px;
    }

    .subscribe {
      // 5/12 of max content-container width
      max-width: calc(#{$bp-max-content} / 12 * 5);
    }

    .more-link {
      margin-top: 30px;
    }

    &:not(:last-child) {
      padding-bottom: 108px;

      @include desktop {
        padding-right: 120px;
        padding-bottom: 60px;
      }
    }

    + .social {
      @include theme('background-color', 'color-tertiary-pastel', 'theme-footer-social-background');

      margin: -60px 20px 0;
      padding: 30px;

      .social-list {
        ul {
          width: calc(100% + 20px);
          margin: 0;

          a {
            &,
            &[download]:not(.button),
            &[href^="http://"]:not(.button):not([href*="gent.be"]),
            &[href^="https://"]:not(.button):not([href*="gent.be"]) {
              @include theme('color', 'color-zero');
              @include theme('background-color', 'color-none');
            }
          }
        }
      }

      @include tablet {
        margin: -60px auto 0;
        padding: 67px;
      }

      @include desktop {
        margin: 60px 0 0 -70px;
      }
    }
  }

  .content-container {
    padding: 0 20px;

    @media (min-width: $bp-max-content + 54px) {
      padding-right: 0;
      padding-left: 0;
    }
  }

  .top,
  .bottom {
    @include tablet {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
    }

    @include desktop {
      flex-wrap: nowrap;
    }
  }

  .top {
    & ~ .bottom {
      margin-top: 12px;

      @include tablet {
        margin-top: 72px;
      }
    }
  }

  ///
  /// External links other than group Ghent get an indicator.
  ///
  a {
    @extend %a-remove-indicator;
  }
}