.newsletter {
  @extend %gradient-bg;
  padding: 3rem;
  align-items: center;
  text-align: center;

  > article {
    justify-content: center;
  }

  @media screen and (min-width: $tablet) {
    text-align: left;
    padding: 5rem;
  }

  @media screen and (max-width: $tablet) {
    &--btn {
      text-align: center;
      margin-top: 2rem;
    }
  }

  article > .field.is-grouped {
    flex-flow: column;
    padding-top: 2rem;

    .control,
    .select, 
    .select > select, 
    .control > a {
      width: 100%;
    }

    .select {
      margin-top: 0.75rem;
      margin-bottom: 0.75rem;
    }

    @media screen and (min-width: $tablet) {
      padding-top: 0;
      flex-flow: initial;

      .control,
      .select, 
      .control > a {
        width: initial;
      }

      .select {
        margin-top: 0;
        margin-bottom: 0;
      }
    }
  }

  p, h4 { color: #fff; }

  h4 {
    padding-bottom: 0.75rem;
  }

  .button,
  .button:hover {
    color: #5b73ff;
    background-color: #fcde00;
  }

  div.select { margin-right: 1.5rem; }
}

.footer {
  padding-top: 3rem;
  padding-bottom: 2rem;
  align-content: center;
  align-items: center;

  article {
    flex-flow: column;
  }

  .navbar { background-color: #fafafa !important; }

  article:first-child {
    align-items: flex-start;
    text-align: center;
    
    p { padding-top: 2rem; }

    @media screen and (min-width: $tablet) {
      text-align: left;
    }
  }

  article:nth-child(2) {
    align-items: flex-end;
    text-align: center;

    .footer-links {
      a {
        text-transform: uppercase;
        color: $text;
        background-color: #fafafa;
        font-size: 0.85rem;
      }
    }

    .social-buttons a { color: $primary; }

    @media screen and (min-width: $tablet) {
      text-align: right;
    }
  }

  article:last-child {
    text-align: center;
    margin-top: 2rem;
  }
}
