.paragraph--type--image-text.paragraph--view-mode--inverse,
.paragraph--type--image-text.paragraph--view-mode--default {
  // Layout: Common styles
  &.layout--text_1st,
  &.layout--image_1st {
    .field--name-parade-title,
    .field--name-parade-text,
    .field--name-parade-image {
      @media screen and (min-width: 768px) {
        width: calc(50% - 0.8em);
      }
    }

    .field--name-parade-image {
      margin: 1em 0 0;
      text-align: center;
      @media screen and (min-width: 768px) {
        margin: 0;
        text-align: right;
      }
    }

    @media screen and (min-width: 768px) {
      .field--name-parade-title,
      .field--name-parade-text {
        text-align: left;
      }
    }
  }

  &.layout--image_1st {
    .field--name-parade-image {
      @media screen and (min-width: 768px) {
        padding-right: 1.5em;
      }
    }
  }

  &.layout--none,
  &.layout--text_1st {
    .field--name-parade-image {
      @media screen and (min-width: 768px) {
        padding-left: 1.5em;
      }
    }
  }

  // Call to action buttons.
  .field--name-parade-call-to-action {
    clear: both;
    .field__item {
      display: inline-block;
    }
    a {
      display: inline-block;

      margin-right: .5em;
      padding: .7em 1.4em;

      transition: background .3s;

      color: white;
      // background: $tieto-blue;
      border-radius: 3px;
      &:hover,
      &:focus,
      &:active {
        text-decoration: none;
      }
    }
  }
}

.paragraph--type--image-text.paragraph--view-mode--inverse {
  // Layout: Text first
  &.layout--text_1st {
    @media screen and (min-width: 768px) {
      // Title and Text
      .field--name-parade-title,
      .field--name-parade-text {
        float: left;
      }
      // Image
      .field--name-parade-image {
        float: right;

        padding-left: 1.5em;
      }
    }
  }
}

.paragraph--type--image-text.paragraph--view-mode--default {
  // Layout: Image first
  &.layout--image_1st {
    @media screen and (min-width: 768px) {
      // Title and Text
      .field--name-parade-title,
      .field--name-parade-text {
        float: right;
      }
      // Image
      .field--name-parade-image {
        float: left;

        padding-right: 1.5em;
      }
      // Call to action buttons.
      .field--name-parade-call-to-action {
        float: right;

        width: 50%;
      }
    }
  }

  &.layout--image_1st_enhanced {
    // Text
    .field--name-parade-text {
      padding: 2em;

      @media screen and (min-width: 768px) {
        width: 60%;
        padding-right: 4em;
      }
    }

    // Image
    .field--name-parade-image {
      padding: 2em 0 0;

      text-align: center;

      img {
        display: block;
      }

      @media screen and (min-width: 768px) {
        float: right;

        width: 40%;
        margin: 2em 0 0 0;
        padding: 0;

        transform: translateX(-2em);
        text-align: left;

        background: 0;
      }
    }
    // Call to action buttons.
    .field--name-parade-call-to-action {
      float: right;
      width: 40%;
      margin-top: -1.5em;
      text-align: center;
    }
  }

  // Layout: Enhanced
  &.layout--text_1st_enhanced {
    // Text
    .field--name-parade-text {
      padding: 2em;

      @media screen and (min-width: 768px) {
        width: 60%;
        padding-right: 4em;
      }
    }

    // Image
    .field--name-parade-image {
      padding: 2em 0 0;

      text-align: center;

      img {
        display: block;
      }

      @media screen and (min-width: 768px) {
        float: right;

        width: 40%;
        margin: 2em 0 0 0;
        padding: 0;

        transform: translateX(-2em);
        text-align: left;

        background: 0;
      }
    }
    // Call to action buttons.
    .field--name-parade-call-to-action {
      float: right;
      width: 40%;
      margin-top: -1.5em;
      text-align: center;
    }
  }
}