.signup-landing-page,
.root-landing-page {
  .banner-footer {
    background-color: $blue-dark;
    margin-top: 5 * $vertical-height;
    position: relative;
    padding: (2 * $vertical-height) 0;
    overflow: hidden;

    @include media-breakpoint-up(lg) {
      padding: (12 * $vertical-height) 0 (11 * $vertical-height);
    }

    .chainring-bg {
      display: block;
      position: absolute;
      z-index: 0;
      background-image: url("landing_pages/chainring_bg.svg");
      background-size: cover;

      @include media-breakpoint-down(md) {
        width: 95vw;
        height: 95vw;

        &:first-of-type {
          left: -60vw;
          bottom: -35vw;
        }

        &:last-of-type {
          right: -30vw;
          top: -30vw;
        }
      }

      @include media-breakpoint-up(lg) {
        width: 45vw;
        height: 45vw;

        &:first-of-type {
          left: -10vw;
          bottom: -15vw;
        }

        &:last-of-type {
          right: -10vw;
          top: -10vw;
        }
      }
    }

    .footer-overlay {
      display: block;
      position: absolute;
      z-index: 1;
      width: 100%;
      height: auto;
    }

    h3.landing-container-label {
      color: #fff;
      margin-bottom: 2 * $vertical-height;

      @include media-breakpoint-up(lg) {
        margin: (-4 * $vertical-height) 0 (6 * $vertical-height);
      }
    }

    ul {
      @include list-unstyled;

      position: relative;

      li {
        img,
        svg {
          display: block;
          width: 100%;
          margin: 0 auto;
        }

        h4 {
          color: $gray-darker;
          font-size: 16px;
        }

        p {
          color: $gray-light;
        }

        a {
          width: 100%;
        }
      }
    }
  }
}

@media (max-width: $grid-breakpoint-lg - 1px) {
  .signup-landing-page,
  .root-landing-page {
    .banner-footer ul li {
      margin: (2 * $vertical-height) auto 0;
      background: white;
      padding: $vertical-height;
      max-width: 450px;

      .landing-group-card {
        @include make-row;
      }

      a {
        color: $btn-green;
        padding: 0;
        display: inline-block;
        border-radius: 0;
        border: 0;
        text-align: left;
        text-decoration: none;

        &:active,
        &:hover,
        &:focus {
          &,
          &:focus {
            background: none !important;
            color: $btn-green !important;
            text-decoration: underline;
          }
        }
      }

      h4 {
        margin-bottom: 12px;
        line-height: 1.5em;
      }

      p {
        margin-bottom: 12px;
        line-height: 1.5em;
      }
    }
  }
}

@media (min-width: $grid-breakpoint-lg) {
  .signup-landing-page,
  .root-landing-page {
    .banner-footer ul {
      @include make-row;

      li {
        @include make-col-ready;

        @include make-col(3);

        img,
        svg {
          width: 60%;
        }

        .col-xs-4,
        .col-xs-8 {
          max-width: 100%;
          flex: 0 0 100%;
        }

        .landing-group-card {
          background: white;
          padding: 2 * $vertical-height;
        }

        h4 {
          margin: (2 * $vertical-height) 0 0;
          text-align: center;
          min-height: 3em;
        }

        p {
          min-height: 4em;
          text-align: center;
        }

        a {
          padding: 0.75rem 0;
        }
      }
    }
  }
}

@media (min-width: $grid-breakpoint-lg) and (max-width: $grid-breakpoint-xl) {
  // Between lg & xl, text breaks an extra line and throws everything off
  // so make it wider ;)
  .signup-landing-page,
  .root-landing-page {
    .banner-footer ul li p {
      width: 130%;
      margin-left: -15%;
    }
  }
}
