#home {
  .full-width-image {
    position: absolute;
    z-index: -1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    height: 580px;
    max-height: 815px;
    width: 100%;
    top: -200px;
    left: 0;
    overflow: hidden;


    @include mq($max: 550) {

    }

    @include mq($max: 1000) {
      &:before {
        display: none;
      }
    }

    @include mq(1000) {
      height: calc(29vw + 192px);
      align-items: center;
    }

    &:before,
    &:after {
      content: '';
      position: absolute;
      z-index: 10;
      bottom: 0;
      left: 0;

      display: block;
      height: 100%;
      width: 100%;
    }

    &:after {
      background: linear-gradient(to right,  rgba(0,0,19,1) 0%,rgba(0,0,19,0) 10%,rgba(0,0,19,0) 90%,rgba(0,0,19,1) 100%);
    }

    &:before {
      height: 60%;
      background: linear-gradient(180deg,  rgba(0,0,19,0) 0%, rgba(0,0,19, 0.9) 80%, rgba(0,0,19,1) 100%);
    }

    &.is-mobile {
      .full-width-image__video {
        padding-bottom: 85%;

        iframe {
          display: none;
        }
      }
    }

  }

  .full-width-image__video {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: calc((360 / 640) * 100%);

    background-image: url("/img/home-splash-425.jpg");
    background-size: cover;
    background-position: center;

    @include mq(475) {
      background-image: url("/img/home-splash-770.jpg");
    }

    @include mq(820) {
      background-image: url("/img/home-splash-1000.jpg");
    }

    @include mq(1100) {
      background-image: url("/img/home-splash.jpg");
    }

    iframe {
      position: absolute;
      display: block;
      z-index: 0;
      height: 100%;
      width: 100%;
      top: 0;
      left: 0;
      opacity: 0;
      transition: opacity 0.5s;

      &.is-running {
        opacity: 1;
      }
    }

    @include mq($max: 1000) {
      &:before {
        content: '';
        position: absolute;
        z-index: 10;
        bottom: 0;
        left: 0;

        display: block;
        height: 60%;
        width: 100%;
        background: linear-gradient(180deg,  rgba(0,0,19,0) 0%, rgba(0,0,19, 0.9) 80%, rgba(0,0,19,1) 100%);
      }
    }
  }

  .c-text-image.l-bisection--reversed.l-bisection--corners {
    padding-top: 90px;
    @include mq(900) {
      width: column(13, 12);
    }

    .s-text {
      @include mq(900) {
        width: column(6, 12);
      }
      &:after {
        content: '';
        display: block;
        height: calc(100% + 60px);
        position: absolute;
        top: -60px;
        left: -50%;
        width: 50%;
        transform: translate(1px, 0); // needed to prevent line between SVG and div
        background-image: url(/img/home-text-image-left-triangle.svg);
        background-size: contain;
        background-position: right 0;
        background-repeat: no-repeat;

        @include mq(null, 800) {
          display: none;
        }
      }
    }
    .s-image {
      width: calc(100% - 60px);
      left: auto;

      @include mq(800, 900) {
        width: calc(100% - 56px);
        left: -4px;
      }

      @include mq(900) {
        width: column(7, 12);
        left: auto;
      }
    }
  }
}