.large-hero {
  border-bottom: 10px solid $mainBlue;
  position: relative;
  /* z-index: 1; /* this works just in elements that have a position defined */
  cursor: pointer;
}
.large-hero.image {
    display: block;
}

.large-hero.video {
    grid-column: 1;
    grid-row: 1;
    img {
      display: block;
    }
    object-fit: cover; /*to specify how a replaced element, such as an <img> or <video>, should resize itself to fit its container*/
}