.hero--video {
  position: relative;
  max-width: 1364px;
  margin: auto;
  width: 100%;
  max-height: 767px;
  height: 100%;
  aspect-ratio: 329/185;
  overflow: hidden;
  cursor: pointer;
  border-radius: 36px;
}
.hero--video iframe,
.hero--video img {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.hero--video iframe {
  position: absolute;
  inset: 0;
}
@media (hover: hover) {
  .hero--video:hover .hero--video-play {
    background-color: var(--orange);
  }
}

.hero--video-cover {
  object-fit: cover;
}

.hero--video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  mask: url(../images/play.svg) no-repeat center;
  mask-size: contain;
  background-color: var(--blanc);
  height: clamp(32px, 6vw, 64px);
  width: clamp(32px, 6vw, 64px);
  transition: background-color 0.3s ease;
}