.paragraph--background-video-copy {
  width: 100%;

  .bgvc {
    &__video-wrapper {

      position: relative;
      height: 0;
      // Will give us a height-width ratio of 4:3
      padding-bottom: 75%;

      video {
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        object-fit: cover;
      }
    }

    &__text-wrapper {
      padding: 15vw 5vw;
      .bgvc__text {
        height: auto;
      }
    }

    /* If this component is acting as our header */
    header & {
      &__text-wrapper {
        padding: 10vw 5vw;
      }
    }
  }

  @include breakpoint($screen-md) {
    display: flex;

    .bgvc {
      &__video-wrapper,
      &__text-wrapper {
        display: inline-block;
        vertical-align: top;
        width: 50%;
      }

      &__video-wrapper {
        position: relative;
        overflow: hidden;
        height: inherit;
        padding-bottom: 0;

        // position image absolutely so height of section will be based on the text
        video {
          @include no-objectfit; // IE11
          position: absolute;
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      // text should be at least the viewheight, but if the text doesn't fit increase height automatically
      &__text-wrapper {
        padding: 5vw;
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: 100vh;
      }

      header & {
        &__text-wrapper {
          padding: 5vw;
        }
      }
    }

    &--video-right {
      flex-basis: auto; // IE10
      flex-direction: row-reverse;
      -ms-flex-direction: row-reverse; // IE10
    }

    &--video-left,
    &--video-right {
      .bgvc__video-wrapper video {
        @supports (-ms-ime-align: auto) {
          height: 100%;
          width: auto;
          top: 50%;
          left: 50%;
          transform: translate(-50%,-50%);
        }
      }
    }
  }

  // Fullscreen version, simulating the Full Height Single Image component
  &--fullscreen {
    @include breakpoint ($screen-md) {
      display: block;
      position: relative;
      height: 100vh;

      .bgvc {
        &__video-wrapper {
          position: absolute;
          width: 100%;
          height: 100%;
          video {
            object-fit: cover;
            
            @supports (-ms-ime-align: auto) {
              height: auto;
              width: 100%;
              top: 50%;
              left: 50%;
              transform: translate(-50%,-50%);
            }
          }
        }

        &__text-wrapper  {
          min-height: 0;
          padding: 5vw;
          position: absolute;
          width: 56.3%;
          height: auto;
          box-sizing: content-box;
        }
      }

      &.top-left,
      &.middle-left,
      &.bottom-left {
        .bgvc__text-wrapper {
          transform: translateX(0);
          left: 0;
        }
      }

      &.top-right,
      &.middle-right,
      &.bottom-right {
        .bgvc__text-wrapper {
          transform: translateX(0);
          right: 0;
        }
      }

      &.top-left,
      &.top-right {
        .bgvc__text-wrapper {
          transform: translateY(0);
          top: 0;
        }
      }

      &.middle-left,
      &.middle-right {
        .bgvc__text-wrapper {
          transform: translateY(-50%);
          top: 50%;
        }
      }

      &.bottom-left,
      &.bottom-right {
        .bgvc__text-wrapper {
          transform: translateY(0);
          top: auto;
          bottom: 0;
        }
      }

      &.middle-centre .bgvc__text-wrapper {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }

      &.bottom-centre .bgvc__text-wrapper {
        top: auto;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, 0%);
      }

      &.top-centre .bgvc__text-wrapper {
        top: 0;
        left: 50%;
        transform: translate(-50%, 0);
      }
    }

    @include breakpoint($screen-lg) {
      .bgvc__text-wrapper {
        width: 41.7%;
        max-width: 600.75px;
      }
    }
  }
}