:root{
  --c-hero-media--radius: var(--radius-auto-xl);
  --c-hero-media--content-padding: var(--spacing-auto-lg);
  --c-hero-media--content-bg: var(--color-primary);
  --c-hero-media--content-color: var(--color-on-primary);
  --c-hero-media--bg: var(--color-tertiary-light);
  --c-hero-media-padding: var(--spacing-auto-xxl);

}
.c-hero-media{

  position: relative;
  background-color: var(--c-hero-media--bg);
  padding-block-end: var(--c-hero-media-padding);

  &  + .layout--grid{
    margin-block-start:0;
  }


  &::after{
    content: "";
    display: block;
    width: 100%;
    height: var(--c-hero-media-padding);
    background-color: var(--color-white);
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    border-radius: var(--radius-auto-xl) var(--radius-auto-xl) 0 0 ;
  }

  :is( video, img , picture, object, iframe){
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }



}

.c-hero-media__media{
  border-radius: var(--c-hero-media--radius);
  overflow: hidden;
  isolation: isolate;
  z-index: 0;
  position: relative;
  aspect-ratio: 16/9;

  & .c-skip-link{
    --c-skip-link--color: #fff;
    --c-skip-link--color-hover: var(--color-on-primary);

    --c-skip-link--border-color: var(--color-secondary);
    position: absolute;
    bottom: var(--size-fluid-4);
    right: var(--size-fluid-4);;
  }
}
.c-hero-media__content{
  z-index: 1;
  position: relative;
  border-radius: var(--c-hero-media--radius);
  padding: var(--c-hero-media--content-padding);
  background-color: var(--c-hero-media--content-bg);
  --text-color: var(--c-hero-media--content-color);
  --headings-color: var(--c-hero-media--content-color);
  :is(h1,h2,h3,h4,h5,h6,p,li){ color: var(--c-hero-media--content-color);}
  color: var(--text-color);
  margin-block-start: 2.25rem;
  margin-block-end: 2.25rem;

  h1{
    font-size: var(--font-size-h2);
    line-height: 1.1;
  }
}
.c-hero-media__content--bg--primary{
  --c-hero-media--content-bg: var(--color-primary);
  --c-hero-media--content-color: #fff;
}
.c-hero-media__content--bg--secondary{
  --c-hero-media--content-bg: var(--color-secondary);
  --c-hero-media--content-color: var(--color-on-secondary);
}
.c-hero-media__content--bg--tertiary{
  --c-hero-media--content-bg: var(--color-tertiary);
  --c-hero-media--content-color: var(--color-on-tertiary);
}

@media ( min-width: 768px ) {
  .c-hero-media__media{
    aspect-ratio: 1280/650;
  }
  .c-hero-media__content{
    background-color: oklch( from var(--c-hero-media--content-bg) l c h / 0.6);
    backdrop-filter: blur(9px);
    margin-block-start: calc( -2 * var(--size-fluid-7));
    margin-inline-start: var(--size-fluid-5);
    margin-inline-end: var(--size-fluid-8);
    margin-block-end: var(--spacing-auto-xxl);

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap:  var(--spacing-xs) var(--spacing-auto-md);

    & > :first-child, & .c-heading{
      grid-column: span 2;
    }

  }
}