.paragraph--type--image-text.paragraph--view-mode--inverse,
.paragraph--type--image-text.paragraph--view-mode--default {

  .field--name-parade-title {
    @include campaign-headline;
    color: $text-color-strong;
  }

  // Call to action buttons.
  .field--name-parade-call-to-action {
    clear: both;
    text-align: center;
    .field__item {
      display: inline-block;
    }
    // a {
    //     color: white;
    //     display: inline-block;
    //     padding: .7em 1.4em;
    //     margin-right: .5em;
    //     background: $parade-blue;
    //     border-radius: 3px;
    //     transition: background .3s;
    //     &:hover, &:focus, &:active {
    //         text-decoration: none;
    //         background: lighten($parade-blue, 5%);
    //     }
    // }
  }
}

.paragraph--type--image-text.paragraph--view-mode--default {
  &.layout--none,
  &.layout--image_1st {

    .field--name-parade-image {
      @include md {
        width: 33.333%;
      }
    }

    .field--name-parade-title,
    .field--name-parade-text,
    .field--name-parade-call-to-action {
      @include md {
        width: 60.666%;
      }
    }

    .field--name-parade-image {
      text-align: center;
      margin: 1em 0 0;
      @include md {
        margin: 0;
      }
    }

    .field--name-parade-text {
      text-align: justify;
    }

    @include md {
      .field--name-parade-title {
        text-align: left;
      }
    }
  }

  // Layout: Image first
  &.layout--image_1st {
    @include md {
      // Title and Text
      .field--name-parade-title,
      .field--name-parade-text,
      .field--name-parade-call-to-action{
        float: right;
      }
      // Image
      .field--name-parade-image {
        float: left;
        // padding-right: 1.5em;
        text-align: right;
      }
      // Call to action buttons.
      .field--name-parade-call-to-action {
        text-align: center;
        clear: right;
      }
    }
  }

  &.layout--image_1st_enhanced {

    // Title
    .field--name-parade-title {
      @include campaign-title-center;
      width: 100%;
    }

    // Text
    .field--name-parade-text {
      padding: 2em;
      background: $parade-lightblue;

      @include md {
        padding-right: 4em;
        width: 60%;
      }
    }

    // Image
    .field--name-parade-image {
      text-align: center;
      background: $parade-lightblue;
      //padding: 2em 0 0;

      img {
        display: block;
      }

      @include md {
        text-align: left;
        background: 0;
        padding: 0;
        margin: 2em 0 0 0;
        transform: translateX(-2em);
        width: 40%;
        float: right;
      }
    }
    // Call to action buttons.
    .field--name-parade-call-to-action {
      text-align: center;
      width: 46%;
      float: right;
      margin-top: -1.5em;
    }
  }

  // Layout: Enhanced
  &.layout--text_1st_enhanced {

    // Title
    .field--name-parade-title {
      @include campaign-title-center;
      width: 100%;
    }

    // Text
    .field--name-parade-text {
      padding: 2em;
      background: $parade-lightblue;

      @include md {
        padding-right: 4em;
        width: 60%;
      }
    }

    // Image
    .field--name-parade-image {
      text-align: center;
      background: $parade-lightblue;
      //padding: 2em 0 0;

      img {
        display: block;
      }

      @include md {
        text-align: left;
        background: 0;
        padding: 0;
        margin: 2em 0 0 0;
        transform: translateX(-2em);
        width: 40%;
        float: right;
      }
    }
    // Call to action buttons.
    .field--name-parade-call-to-action {
      text-align: center;
      width: 46%;
      float: right;
      margin-top: -1.5em;
    }
  }
}

.paragraph--type--image-text.paragraph--view-mode--inverse {
  &.layout--none,
  &.layout--text_1st {

    .field--name-parade-image {
      @include md {
        width: 33.333%;
      }
    }

    .field--name-parade-title,
    .field--name-parade-text,
    .field--name-parade-call-to-action {
      @include md {
        width: 60.666%;
      }
    }

    .field--name-parade-image {
      text-align: center;
      margin: 1em 0 0;
      @include md {
        margin: 0;
      }
    }

    .field--name-parade-text {
      text-align: justify;
    }

    @include md {
      .field--name-parade-title {
        text-align: left;
      }
    }
  }

  // Layout: Text first
  &.layout--none,
  &.layout--text_1st {

    @include md {
      // Title and Text
      .field--name-parade-title,
      .field--name-parade-text,
      .field--name-parade-call-to-action {
        float: left;
      }
      // Image
      .field--name-parade-image {
        float: right;
        // padding-left: 1.5em;
        text-align: left;
      }
      .field--name-parade-call-to-action {
        text-align: center;
        clear: left;
      }
    }
  }
}