.paragraph--full-height-single-image-single-copy {
  width: 100%;

  .fhsisc {
    &__image-wrapper {
      img {
        display: block;
        width: 100%;
      }
    }
    &__text-wrapper {
      padding: 15vw 5vw;
      position: relative;

      .fhsisc__text {
        height: auto;
      }
    }

    /* If this component is acting as our header */
    header & {
      &__text-wrapper {
        padding: 10vw 5vw;
      }
    }
  }
  
  @include breakpoint($screen-md) {
    display: flex;
    .fhsisc {
      &__image-wrapper,
      &__text-wrapper {
        display: inline-block;
        vertical-align: top;
        width: 50%;
      }
      &__image-wrapper {
        position: relative;
        overflow: hidden;
        height: inherit;
        // position image absolutely so height of section will be based on the text
        img {
          @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;
        }
      }
    }

    &.paragraph--full-height-single-image-single-copy--image-right {
      flex-basis: auto; // IE10
      flex-direction: row-reverse;
      -ms-flex-direction: row-reverse; // IE10
    }
  }
}