

.media-block {
  position: relative;
  overflow: hidden;
  height: 450px;
  text-align: center;
  #play-icon {
    width: 60px;
    margin: 0 auto 10px;
    transition: 0.2s;
    path {
      fill: $colour-yellow;
    }
  }
  &:hover {
    .media-block__image img {
      @include opacity(1);
    }
    #play-icon {
      transform: scale(1.2);
    }
  }
}
.media-block__link {
  position: absolute;
  z-index: 10;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-indent: -9999px;
}
.media-block__image {
  height: 100%;
  img {
    display: block;
    width: 100%;
    height: 100%;
    transition: 0.2s;
    @include opacity(0.9);

    object-fit: cover;
    .no-objectfit & {
      position: absolute;
      top: -100%;
      right: -100%;
      bottom: -100%;
      left: -100%;
      overflow: hidden;
      width: auto;
      max-width: none;
      height: 100%!important;
      max-height: none;
      margin: auto;
    }
  }
}
.media-block__content-wrapper {
  position: relative;
}
.media-block__content {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 40px 10px 20px;
  background-image: linear-gradient(rgba(0,0,0,0), $colour-dark-blue);
  @include breakpoint($screen-md) {
    padding: 40px 40px 20px;
  }
  .cr-body {
    h2, h3, h4, h5, p {
      color: $colour-white;
    }
    .font--yellow {
      color: $colour-yellow;
    }
  } 
}
.media-block__caption {
  display: none;
}
