.intro-group {
  .intro-row {
    padding-left: calculateRem(50);
    padding-right: calculateRem(50);
    display: flex;
    flex-direction: column;
    justify-content: center;
    .intro {
      @include breakpoint(mobile) {
        flex-flow: column nowrap;
      }
      @include breakpoint(tablet) {
        flex-flow: row nowrap;
        justify-content: space-between;
      }
      & > div {
        @include breakpoint(mobile) {
          width: 100%;
        }
        @include breakpoint(tablet) {
          width: 50%;
        }
      }
      .content {
        @include breakpoint(mobile) {
          padding-right: 0;
        }
        @include breakpoint(tablet) {
          padding-right: calculateRem(40);
        }
        align-self: center;
      }
      .media {
        min-height: 100%;
        overflow: hidden;

        display: flex;
        justify-content: center;
        align-items: center;

        @include breakpoint(mobile) {
          margin-top: calculateRem(80);
          padding-left: 0;
        }
        @include breakpoint(tablet) {
          margin-top: 0;
          padding-left: calculateRem(40);
        }
        iframe {
          min-height: 100%;
          min-width: 100%;
        }
        video {
          @include breakpoint(mobile) {
            width: 100%;
          }
          @include breakpoint(tablet) {
            min-width: 100%;
          }
        }
        img {
          max-width: 100%;
          max-height: 100%;
        }
      }

      &.image-on-left {
        @include breakpoint(tablet) {
          flex-direction: row-reverse;
          .content {
            padding-right: 0;
            padding-left: calculateRem(40);
          }
          .media {
            padding-left: 0;
            padding-right: calculateRem(40);
          }
        }
      }
    }
  }
}
