// ---------------------------------------------------------------------
//  Media Styles
// ---------------------------------------------------------------------

.video-wrap,
.video-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;

  border-radius: 16px;


  &.video-playing,
  &.is-playing {
    .video-wrap__poster {
      opacity: 0;
      pointer-events: none;
    }
  }

  .video-wrapper__poster,
  video,
  iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

.video-wrap__poster {
  @include cover-parent;
  z-index: 2;
  background: $black;

  img {
    opacity: 0.8;
  }

  &:hover {
    cursor: pointer;

    img {
      opacity: 0.6;
    }

    svg {
      fill: $brand;
    }
  }

  figcaption {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 3;
    font-size: 16px;
    width: 100%;
    padding: 24px;
    color: $white;
    text-align: left;
  }

  svg {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    fill: $white;
    transition: fill $trans;
  }

  > img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    z-index: -1;
    transition: opacity $trans;
  }
}


.img-overlay {
  position: relative;
  overflow: hidden;

  .overlay {
    z-index: 2;
    display: block;
    position: absolute;
    top: -3px;
    left: -3px;
    object-fit: cover;
    width: calc(100% + 10px);
    height: calc(100% + 10px);
    max-width: calc(100% + 10px);
  }

}


.img-full {
  width: 100%;
}

.img-cover {
  object-fit: cover;
  width:100%;
  height:100%;
}

.bg-image {
  @include bg-image;
}

.bg-image--gradient-left {
  &:after {
    content: '';
    background-image: linear-gradient(270deg, rgba(36,41,46,0.00) 0%, #24292E 59%);
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
    display: block;
  }
}


.bg-image-dark {
  &:after {
    content: '';
    background-image: linear-gradient(180deg, rgba(36,41,46,0.00) 0%, #24292E 59%);
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
    display: block;
    z-index: 2;
    opacity: 0.5;
  }

  &:before {
    content: '';
    background: $black;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
    display: block;
    z-index: 2;
    opacity: 0.85;

  }
}


// ----------------------------------------
// SVGs
// ----------------------------------------

svg {
  display: block;
  fill: currentColor;
}


// ----------------------------------------
// Media Object
// ----------------------------------------

.media-object {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  max-width: 1032px;
  margin: 0 auto;

  .media-object__media {
    position: relative;
    overflow: hidden;
    padding: 0;
    margin: 0;

    border: 1px solid rgba(53, 72, 91, 0.14);
    box-shadow: 0px 0px 60px 0px rgba(0,0,0,0.25);
    border-radius: 6px;
    height: 0;
    padding-bottom: 56%;

    @include start-at($medium) {
      padding-bottom: 30%;
    }

    img,
    iframe {
      object-fit: cover;
      width: 100%;
      height: 100%;
      position: absolute;
      padding: 0;
      margin: 0;

      &.img-top {
        object-position: top;
      }
    }
  }

  @include stop-at($medium) {
    .media-object__media {
      order: 1;
      margin: 0 auto 24px;
      width: 100%;
    }
    .media-object__content {
      order: 2;
    }
  }

  @include start-at($medium) {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: space-between;

    &.media-object--top-align {
      align-items: flex-start;
    }

    .media-object__media {
      width: calc(50% - 16px);
    }

    .media-object__content {
      width: calc(50% - 16px);
    }
  }

  @include start-at($large) {

    .media-object__media {
      width: calc(50% - 24px);
    }

    .media-object__content {
      width: calc(50% - 24px);
    }
  }
}


.media-object--lg {
  max-width: 1248px;


  .media-object__media {
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding-bottom: 70%;

    @include start-at($medium) {
      padding-bottom: 40%;
    }
  }

  @include stop-at($medium) {
    .media-object__content {
      width: 100%;
      margin: 0 auto;
    }
  }

  @include stop-at($large) {
    .media-object__content {
      padding-left: $wrapper-padding;
      padding-right: $wrapper-padding;
    }
  }
}
