:root{
  --c-hero-text--content-padding: var(--spacing-auto-xl);
  --c-hero-text--container-padding: calc( 1.8 * var(--spacing-auto-xl)) 0;
  --c-hero-deco-size: clamp(80px, 30px + 20vw, 270px)
}
.c-hero-text{

  border-radius: 0;
  position: relative;
  padding-block-end: calc( 2 * var(--spacing-auto-xl) );

  &::after{
    content: "";
    display: block;
    width: 100%;
    height: var(--c-hero-text--content-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 ;
  }

  > .container{
    display: grid;
    gap: var(--c-hero-text--content-padding);
    padding: var(--c-hero-text--container-padding);
    anchor-name: --hero-text-container;
  }
  & .c-hero-text__top{
    /*padding-block: var(--c-hero-text--content-padding);*/
    :is(h1,h2,h3,h4,h5,h6){
      text-align: center;
    }
  }

  & .c-hero-text-deco1,
  & .c-hero-text-deco2{
    position: absolute;
    position-anchor: --hero-text-container;
    --icon-color: var(--color-secondary);
    svg{
      width: var(--c-hero-deco-size);
      height: var(--c-hero-deco-size);
    }

  }

  & .c-hero-text-deco1{
    top: anchor( top );
    right: anchor( left );
    margin-block-start: var(--spacing-auto-md);
  }
  & .c-hero-text-deco2{
    bottom: anchor( bottom );
    left: anchor( right );
  }

  & .c-hero-text__bottom{
    max-width: 60ch;
    justify-self: center;
  }

}