.shopify-section--hero-external-video {
  & > zag-section {
    display: block;
    position: relative;
    inline-size: calc(100% - 2 * var(--zag-gutter));
    max-inline-size: var(--max-inline-size, 120rem);
    margin-inline: auto;
    margin-block-start: var(--mobile-margin-block-start);
    margin-block-end: var(--mobile-margin-block-end);
  }

  @media (width >= 48rem) {
    & > zag-section {
      margin-block-start: var(--desktop-margin-block-start);
      margin-block-end: var(--desktop-margin-block-end);
    }
  }

  & > [data-modifiers*="full-width"] {
    inline-size: 100%;
    max-inline-size: 100%;
  }

  & > [data-modifiers*="content-full-width"] .content-wrapper {
    padding-inline: var(--mobile-gutter, 1rem);
  }

  & > [data-modifiers*="content-full-width"] .content-wrapper,
  & > [data-modifiers*="content-full-width"] .content-wrapper .content-container {
    inline-size: calc(100% - 2 * var(--zag-gutter));
    max-inline-size: 90rem;
  }

  & .media-container {
    position: relative;
    overflow: hidden;
  }

  & .media-container .hero-external-video {
    display: block;
    inline-size: 100%;
    /* fallback: 16:9 when height mode is "auto" */
    aspect-ratio: 16 / 9;

    &[data-modifiers*="desktop"] {
      display: none;
    }

    @media (width >= 48rem) {
      &[data-modifiers*="mobile"] {
        display: none;
      }

      &[data-modifiers*="desktop"] {
        display: block;
      }
    }

    & iframe {
      display: block;
      inline-size: 100%;
      block-size: 100%;
      border: none;
    }
  }

  /* Height: percentage */
  & > [data-modifiers*="mobile-height:percentage"] .media-container .hero-external-video {
    aspect-ratio: unset;
    block-size: var(--mobile-height-percentage);
  }

  @media (width >= 48rem) {
    & > [data-modifiers*="desktop-height:percentage"] .media-container .hero-external-video {
      aspect-ratio: unset;
      block-size: var(--desktop-height-percentage);
    }
  }

  /* Height: fixed */
  & > [data-modifiers*="mobile-height:fixed"] .media-container .hero-external-video {
    aspect-ratio: unset;
    block-size: var(--mobile-height-fixed);
  }

  @media (width >= 48rem) {
    & > [data-modifiers*="desktop-height:fixed"] .media-container .hero-external-video {
      aspect-ratio: unset;
      block-size: var(--desktop-height-fixed);
    }
  }

  /* Height: aspect_ratio */
  & > [data-modifiers*="mobile-height:aspect_ratio"] .media-container .hero-external-video {
    aspect-ratio: var(--mobile-height-aspect-ratio);
  }

  @media (width >= 48rem) {
    & > [data-modifiers*="desktop-height:aspect_ratio"] .media-container .hero-external-video {
      aspect-ratio: var(--desktop-height-aspect-ratio);
    }
  }

  & .content-wrapper {
    display: flex;
    position: absolute;
    align-items: flex-end;
    justify-content: flex-start;
    block-size: 100%;
    inline-size: calc(100% - 2 * var(--zag-gutter));
    max-inline-size: 85rem;
    margin-inline: auto;
    padding-block: 2.5rem;
    inset: 0;
    pointer-events: none;

    --navigation-bar-margin-inline-start: 8.5rem;
    --container-max-inline-size: 42.5rem;
    --container-margin-inline-end: 0;

    @media (width >= 60rem) {
      justify-content: flex-end;
      padding-block: 3.5rem;

      --navigation-bar-margin-inline-start: 11.75rem;
      --wrapper-justify: flex-end;
      --container-margin-inline-end: max(
        0rem,
        (
            min(100vw - var(--scrollbar-width) - 2 * var(--zag-gutter), 85rem) -
              var(--navigation-bar-margin-inline-start)
          ) - var(--container-max-inline-size)
      );
    }

    @media (width >= 70rem) {
      --navigation-bar-margin-inline-start: 16.75rem;
    }

    @media (width >= 80rem) {
      --navigation-bar-margin-inline-start: 28.75rem;
    }
  }

  & .content-container {
    display: block;
    position: relative;
    gap: 1rem;
    inline-size: 100%;
    max-inline-size: var(--container-max-inline-size);
    margin-inline-end: var(--container-margin-inline-end);
    pointer-events: auto;
  }

  & .shopify-block--button:not([data-modifiers*="full-width"]) {
    inline-size: fit-content;
  }
}