.media-video {
  margin-bottom: calc(35/16 * 1rem);
}

.media-video__wrapper {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 845 / 475;

  margin-bottom: calc(25.24/16 * 1rem);
  border-radius: calc(12/16 * 1rem);
  overflow: hidden;
}

.media-video__cover-image-wrapper {
  width: 100%;
  height: 100%;

  position: absolute;
  top: 0;
  left: 0;

  z-index: 3;

  &.hidden {
    display: none;
  }

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

.media-video__play-button-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  height: calc(77/16 * 1rem);
  width: calc(77/16 * 1rem);

  transform: translate(-50%, -50%);
  cursor: pointer;

  button {
    height: 100%;
    width: 100%;
    border-radius: 50%;
    background-color: rgba(1, 117, 80, 0.8);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;

    svg {
      color: white;
      height: calc(30/16 * 1rem);
      width: calc(30/16 * 1rem);
      fill: white;
    }
  }
}

.media-video__youtube {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  z-index: 2;
}

.media-video__title {
  font-weight: 800;
  color: #173f6c;
  font-size: calc(23/16 * 1rem);
  line-height: calc(27.65/16 * 1rem);
  letter-spacing: 0;
}

.media-video__blurb {
  font-weight: 400;
  font-size: calc(18/16 * 1rem);
  letter-spacing: 0;
  line-height: calc(23.4/16 * 1rem);
  color: black;
  margin-bottom: calc(25/16 * 1rem);
}


.media-video__loading-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: rgba(1, 117, 80, 0.8);
  z-index: 0;
}

/*  Throbber */
  .media-video__loading {
    width: 150px;
    height: 150px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;


    g {
      animation: spin 1s linear infinite;
      transform-origin: center;
      transform-box: fill-box;
    }
  }



@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}