.newsletter-widget {
  background-color: $color-blue-300;

  .card-text {
    background-color: transparent;

    &.content-card-text {
      display: block;
    }
  }

  .h3 {
    margin-bottom: $margin-enterprise;
  }

  form {
    display: flex;
    flex-wrap: wrap;
  }

  input {
    flex-grow: 1;
    margin: 0 0 $margin-half;
    max-width: 100%;
  }

  button {
    flex-grow: 1;
    margin: 0 0 $margin-half;
    padding: $margin-half;
  }

  .messagebox {
    height: 1.5em;
    margin: 4px 0;
  }

  .notice-box {
    @include font-size(14);
    position: absolute;
    bottom: $margin-double;
    font-weight: bold;
    line-height: 100%;
  }

  a {
    color: inherit;
  }

  img {
    width: 258px;
    margin: -24px 0 -125px 25%;
  }

  @include breakpoint(xs) {
    img {
      height: $margin-normal;
    }
  }

  @include breakpoint(sm) {
    form {
      flex-wrap: nowrap;
      align-items: stretch;
    }

    input {
      border-radius: 4px 0 0 4px;
    }

    button {
      flex-grow: 0;
      border-radius: 0 4px 4px 0;
    }

    img {
      height: 272px;
      margin: -24px 0 -60px 25%;
    }
  }

  @include breakpoint(md) {
    &:nth-child(n):nth-last-child(n) {
      .card-text {
        display: block;
        padding: $margin-double;
      }
    }
  }
}