.c-text-image {
  align-items: stretch;

  .l-bisection__item {
    @include mq(900) {
      width: 50.9%;
    }
  }

  .s-image {
    position: relative;
  }

  .s-text {
    background-color: white;
    padding: 60px column(0.75, 12) 60px column(0.5, 12);
    color: black;

    @include mq(1028) {
      padding: 60px column(1, 12);
    }

    h1, h2, h3, h4, h5 {
      color: black;
    }

    .c-button {
      color: palette(text, 400);

    }

    a {
      color: palette(text, 400);
    }
  }

  &.l-bisection--gradient {
    .s-text {
      background-color: palette(dark);
      color: white;

      h1, h2, h3, h4, h5 {
        color: white;
      }

      .c-button {
        color: palette(action);
      }
    }

    .s-image {
      position: relative;

      &:after {
        content: '';
        display: none;
        height: 100%;
        position: absolute;
        bottom: 0;
        right: 0;
        width: 20%;
        background: linear-gradient(to right, transparent 0%, palette(dark) 70%);

        @include mq(900) {
          display: block;
        }
      }
    }

    &.l-bisection--reversed {
      .s-image::after {
        right: auto;
        left: 0;
        background: linear-gradient(to left, transparent 0%, palette(dark) 70%);
      }
    }
  }

  &.l-bisection--corners {
    padding-top: 60px;

    .o-block#component-item-1 & {
      padding-top: 0;
      margin-top: -40px;
    }

    .s-image {
      position: relative;
      &:after {
        content: '';
        display: block;
        height: 60px;
        position: absolute;
        width: 100%;
        background-size: calc(100% + 60px);
        top: 0;
        left: 0;
        background: linear-gradient(135deg, palette(dark) 0, palette(dark) 40px, transparent 41px) 0 0;

        @include mq(900) {
          bottom: 0;
          top: auto;
          background: linear-gradient(-45deg, palette(dark) 0, palette(dark) 59px, transparent 60px) -35px 0;
          background-size: calc(100% + 60px);
        }
      }
    }

    .s-text {
      position: relative;
      margin-bottom: 60px;
      &:before {
        content: '';
        display: block;
        height: 60px;
        position: absolute;
        top: -60px;
        left: 0;
        width: 100%;
        background: linear-gradient(135deg, transparent 0, transparent 59px, white 60px) -25px 0;
        background-size: calc(100% + 60px);
      }
    }

    &.l-bisection--reversed {
      .s-image::after {
        @include mq(900) {
          background: linear-gradient(45deg, palette(dark) 0, palette(dark) 59px, transparent 60px) -25px 0;
          background-size: calc(100% + 60px);
        }
      }

      .s-text::before {
        background: linear-gradient(-135deg, transparent 0, transparent 59px, white 60px) -35px 0;
        background-size: calc(100% + 60px);
      }
    }
  }

  &.l-bisection--slider {
    .s-text {
      margin-bottom: 0;
      padding-bottom: 60px;
    }

    .s-image:after {
      @include mq(900) {
        bottom: 0;
        top: auto;
        background: linear-gradient(-45deg, white 0, white 59px, transparent 60px) -35px 0;
        background-size: calc(100% + 60px);
      }
    }
  }
}