.media--remote-video .media__video-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
}
.media--remote-video .media__video-wrapper iframe,
.media--remote-video .media__video-wrapper video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.media--remote-video .media__play-pause-icon::before {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  font-feature-settings: normal;
  font-style: normal;
  font-synthesis: none;
  font-variant: normal;
  line-height: 1;
  text-align: center;
  text-rendering: auto;
}

.media--remote-video {
  width: 100%;
}
.media--remote-video .media__poster {
  --img--object-fit: cover;
  --img--width: 100%;
  --img--height: 100%;
  --img--border-radius: 9.216px;
  height: 100%;
}
.media--remote-video .media__play-pause-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: 2;
  display: inline-block;
  pointer-events: none;
}
.media--remote-video .media__play-pause-icon::before {
  font-family: "Font Awesome 7 Sharp Regular";
  content: "\e22f";
  background-color: #090A0F;
  padding: 22.5px;
  border-radius: 100vw;
  color: #ffffff;
  font-size: 1.25rem;
}
.media--remote-video .media__play-pause-icon::after {
  content: "";
  position: absolute;
  border-radius: 100vw;
  inset: 0;
  background-image: linear-gradient(to bottom, #EFAA37 0%, #EB3F34 100%);
  isolation: isolate;
  z-index: -1;
  scale: 1.1;
  transition: filter 200ms ease-in-out;
}
.media--remote-video .media__overlay {
  background-color: #090A0F;
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  border-radius: 9.216px;
}
.media--remote-video .media__overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to bottom, #EB3F34 0%, #EFAA37 100%);
  opacity: 0.4;
  border-radius: inherit;
}
.media--remote-video .media__overlay:hover .media__play-pause-icon::after, .media--remote-video .media__overlay:focus-visible .media__play-pause-icon::after {
  filter: blur(5px);
}
