.oxygen-case-page .oxygen-hero-visual {
  bottom: auto;
  aspect-ratio: 1 / 1;
}

.oxygen-case-page .oxygen-hero-visual video {
  object-fit: cover;
  object-position: top center;
}

.oxygen-case-page .oxygen-film {
  position: relative;
}

.oxygen-case-page .oxygen-film-play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 72%);
  border-radius: 50%;
  background: rgb(16 16 16 / 28%);
  color: #fff;
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition:
    background 160ms ease,
    transform 160ms ease;
}

.oxygen-case-page .oxygen-film-play::before {
  display: block;
  width: 0;
  height: 0;
  margin-left: 3px;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 11px solid currentcolor;
  content: "";
}

.oxygen-case-page .oxygen-film-play:hover,
.oxygen-case-page .oxygen-film-play:focus-visible {
  background: rgb(16 16 16 / 40%);
  transform: translate(-50%, -50%) scale(1.04);
}

@media (min-width: 761px) {
  .oxygen-case-page .oxygen-hero-visual {
    width: min(
      70.2%,
      calc(100vh - 96px - clamp(320px, 30vh, 370px))
    );
  }
}