.custom-video {
  display: flex;
  position: relative;
  border-radius: 16rem;
  overflow: clip;
  .custom-video-cover {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    object-fit: cover;
    z-index: 1;
    cursor: pointer;
    background: #eee;
    transition: opacity 1s var(--curve);
  }
  .play-button {
    width: 100rem;
    height: 100rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 50%;
    bottom: 50%;
    z-index: 3;
    transform: translate(50%, 50%);
    cursor: pointer;
    transition: opacity 1s var(--curve);
    &::before {
      content: '';
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 0;
      border-radius: 50%;
      background: url('../../img/backgrounds/play-bg.svg');
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      transition: transform 1.2s var(--in-out) .1s;
    }
    svg {
      width: 18rem;
      height: auto;
      fill: var(--silver);
      z-index: 1;
      transform: translateX(5%);
      transition: transform 1s var(--in-out) 0s;
    }
    &:hover {
      &::before {
        transform: scale(1.1);
      }
      svg {
        transform: translateX(5%) scale(0.8);
      }
    }
  }
  video, iframe {
    width: 100%;
    z-index: 0;
  }
  iframe {
    aspect-ratio: 16 / 9;
  }
  &.playing {
    .custom-video-cover, .play-button {
      opacity: 0;
      pointer-events: none;
    }
  }
  @media (max-width: 580px) {
    .play-button {
      width: 48px;
      height: 48px;
      svg {
        width: 10rem;
        transform: translateX(16%);
      }
    }
  }
}