@layer components {

  .media-video {
    display: flex;
    flex-direction: column;
    gap: var(--content-gap);
    margin: 0;
  }

  .media-video__heading {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--heading-block);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    color: var(--text-main);
  }

  .media-video__frame {
    position: relative;
    inline-size: 100%;
    aspect-ratio: var(--ratio-landscape);
    overflow: hidden;
    border-radius: var(--radius-l);
    background: var(--surface-sunken);
  }

  .media-video__native,
  .media-video__poster,
  .media-video__yt-lazy {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
  }

  .media-video__yt-lazy {
    position: relative;
    cursor: pointer;
    isolation: isolate;
  }

  .media-video__yt-lazy::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      180deg,
      transparent 55%,
      color-mix(in oklch, var(--black) 35%, transparent) 100%
    );
    pointer-events: none;
  }

  .media-video__poster {
    transition: transform var(--duration-slow) var(--ease-out);
  }

  .media-video__yt-lazy:hover .media-video__poster {
    transform: scale(1.02);
  }

  .media-video__play {
    position: absolute;
    inset-block-end: var(--space-m);
    inset-inline-start: var(--space-m);
    z-index: var(--z-base);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--space-3xl);
    block-size: var(--space-3xl);
    padding: 0;
    border: none;
    border-radius: var(--radius-full);
    background: var(--white);
    color: var(--primary-ultra-dark);
    cursor: pointer;
    box-shadow: var(--shadow-m);
    transition:
      transform var(--duration-fast) var(--ease-default),
      background var(--duration-fast) var(--ease-default);
  }

  .media-video__yt-lazy:hover .media-video__play,
  .media-video__play:hover {
    background: var(--secondary);
    color: var(--white);
    transform: scale(1.06);
  }

  .media-video__play:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

  .media-video__play-icon {
    inline-size: var(--icon-inline-xl);
    block-size: var(--icon-inline-xl);
    fill: currentColor;
  }

}