[data-component-id="kackaamin:custom_youtube"] {
  position: relative;
  width: 100%;
  max-width: 100%;
  background-color: color-mix(in srgb, var(--text-primary) 30%, transparent);
  --video-radius: 71.58px 0;
  border-radius: var(--video-radius);
  
  & .video-wrapper {
    aspect-ratio: 16 / 9;
  }

  & youtube-video {
    width: 100% !important;   /* Force the web component to match 100% wrapper width */
    height: 100% !important;  /* Force the web component to match 100% wrapper height */
    display: block;           /* Ensures block element layout properties apply */
    border: 0;
    overflow: clip;
    border-radius: var(--video-radius);
    min-width: 0;
  }

  @media (min-width: 768px) {
    --video-radius: 176px 0;
  }
}

/* overwrite for video stepper - only 1 usage */
[data-component-id="kackaamin:stepper"] [data-component-id="kackaamin:custom_youtube"] {
  --video-radius: 72px 0;
  & .video-wrapper {
    aspect-ratio: 645 / 414;
  }
  @media (min-width: 768px) {
    --video-radius: 152px 0;
  }
}

/* overwrite - since home page video also only has 1 usage */
.layout--twocol-section [data-component-id="kackaamin:custom_youtube"] {
  --padding: 18.5px;
  padding: var(--padding) 0;
  @media (min-width: 768px) {
    --padding: 40px;
  }
}