/* @widescreen */
.widescreen {
  min-height: 520px;
  display: flex;

  @media (max-width: $medium-screen) {
    flex-wrap: wrap;
  }

  &--1 {
    flex-direction: row-reverse;
  }

  &__image {
    flex: 1;
    flex-basis: 50%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    min-height: 200px;
    min-width: 100%;
    // max-height: calc(100vh - 120px); I'm not sure why this has stopped working, needs investigating

    @media screen and (min-width: 768px) {
      min-width: 450px;
    }

    @media screen and (min-width: 900px) {
    	position: sticky;
      top: 120px;
      min-height: 520px;
    }

    @media (max-width: 899px) {
      &.preserve-image {
        background-size: contain !important;
        background-position: center;
        max-height: calc(100vh - 40px);
        min-width: 100vw !important;
      }
    }
  }

  &__wrapper {
    flex: 1;
    flex-basis: 50%;
    @include poly-padding--large;
    display: flex;
    justify-content: center;
    flex-direction: column;
  }

  &__contents {
    max-width: 726px;
    width: 100%;
    margin: 0 auto;
  }

  .cta {
  	margin-top: $base-spacing;

  	&--link {
  		margin-left: -$base-spacing;
  	}
  }

  @media (max-width: 600px) {
    .content-column>div {
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
  }
}