.block-type-cta {
  background: $brightblue;

  *,
  a {
    color: $white;

    &:focus {
      outline-color: #FFF;
    }
  }

  p {
    font-family: $serif;
    font-size: 2.6rem;
    line-height: 1.4;

    &:not(:first-child) {
      margin-top: 2.2rem;
    }
  }

  a.usa-button {
    @extend .usa-button--dark;
  }
}

.block-content--type-horizontal-cta {
  @extend .block-type-cta;
  @extend %vertical-spacing-padding;
  background: $darkblue;

  > .block-content__content {
    @extend .grid-container;
  }

  p {
    font-family: $theme-font-type-sans;
    font-size: 1.6rem;
    line-height: 2;
    margin-top: 2rem;
  }

  @include at-media-max('tablet-lg') {
    .field--name-field-image + .field--name-field-body {
      padding-top: 2rem;
    }
  }

  @include at-media('tablet-lg') {
    margin-top: 12rem;

    > .block-content__content {
      display: flex;
      width: 100%;
      justify-content: space-between;

      > * {
        width: 50%;

        img {
          margin-top: -12rem;
        }

        h2 {
          font-size: 4rem;
        }
      }

      .field--name-field-image + .field--name-field-body {
        padding-left: 6rem;
      }
    }

    &.reverse-on > .block-content__content {
      flex-direction: row-reverse;

      .field--name-field-image + .field--name-field-body {
        padding-right: 6rem;
        padding-left: 0;
      }
    }
  }

  @include at-media('desktop') {
    > .block-content__content {
      .field--name-field-image + .field--name-field-body {
        padding-left: 12rem;
      }
    }

    &.reverse-on > .block-content__content {
      .field--name-field-image + .field--name-field-body {
        padding-right: 12rem;
        padding-left: 0;
      }
    }
  }
}