:root{
  --slider-item--aspect-ratio: none;
  --slider-item--max-height: 100%;
  --slider-item--min-height: 420px;

  --slider-item--content-gap: 1.25rem;
  --slider-item--spacing: var(--spacing-auto-lg);
  --slider-item--font-size: .85rem;
  --slider-item--content-max-width: 65ch;
  --slider-item--content-margin: 0;
  --slider-item--content-align: end;

  --slider-item-title--font: var(--font-button,'Arial sans-serif');
  --slider-item-title--font-size: var(--font-size-md);
  --slider-item-title--font-weight: 500;
  --slider-item-title--transform: none;
  --slider-item-title--line-height: 1.4;

  --slider-item-sub-title--font: var(--font-button,'Arial sans-serif');
  --slider-item-sub-title--font-size: var(--font-size-h5);
  --slider-item-sub-title--font-weight: 300;
  --slider-item-sub-title--transform: uppercase;
  --slider-item-sub-title--line-height: 1;

  --slider-item--color: var(--color-on-dark, #fff);
  --slider-item--bg: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 50%);

}

[data-component-id="picard25:slider_item"] {
  /* @todo Add your styles here. */
  --text-color: var(--slider-item--color);
  --headings-color: var(--slider-item--color);
  --link-color: var(--slider-item--color);
  --blockquote-color: var(--slider-item--color);



  /*--slider-item--title-font-size: 2.5rem;*/
  /*--slider-item--title-font-weight: 300rem;*/
  /*--slider-item--title-line-height: 1.2;*/

  /*--slider-item--sub-title-font-size: .1.5rem;*/
  /*--slider-item--sub-title-font-weight: 300rem;*/

  &.slider-item--variant2{
    --slider-item--bg: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 50%);
  }

  font-size: var(--slider-item--font-size);

  isolation: isolate;
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  aspect-ratio: var(--slider-item--aspect-ratio);
  min-height: var(--slider-item--min-height);
  max-height: var(--slider-item--max-height);
  width: 100%;
  overflow: hidden;

  &::before{
    content:'';
    display:block;
    position:absolute;
    inset:0;
    z-index:2;
    background: var(--slider-item--bg, transparent);
  }

  & .media-wrapper{
    z-index: 1;
    grid-area: 1 / 1 / 2 / 2;

    & :is( .block, .block_content, .field, .media){
      display: contents;
    }

    & :is( img, picture, video, embed, object, iframe){
      width: 100%;
      height: 100%;
      object-fit: cover;
      aspect-ratio: var(--slider-item--aspect-ratio);
      max-height: var(--slider-item--max-height);
      /*min-height: var(--slider-item--min-height);*/
    }
  }
  & .content-wrapper{
    z-index: 3;
    grid-area: 1 / 1 / 2 / 2;

    --text-color: var(--slider-item--color);
    --headings-color: var(--slider-item--color);
    --link-color: var(--slider-item--color);
    --button-color: var(--slider-item--color);
    --button-border--color: var(--slider-item--color);

    padding: var(--slider-item--spacing);

    color: var(--slider-item--color);
    display: grid;
    grid-template-columns: auto max-content;
    gap: var(--slider-item--content-gap);
    /*align-items: end;*/
    align-content: var(--slider-item--content-align, end);
    justify-content: start;
    grid-auto-rows: max-content;
    position: relative;
    margin-inline: var(--slider-item--content-margin);
    width: 100%;
    @media (min-width: 480px){
      width: min( 100% - 3rem, var(--slider-item--content-max-width));
    }



    .button{
      --text-color : var(--slider-item--color);
    }


    & :is(.title){
      font-family : var(--slider-item-title--font);
      font-size: var(--slider-item-title--font-size);
      font-weight: var(--slider-item-title--font-weight);
      line-height: var(--slider-item-title--line-height);
      text-transform: var(--slider-item-title--transform);
      margin:0;
    }
    & :is(.sub-title){
      font-family : var(--slider-item-sub-title--font);
      font-size: var(--slider-item-sub-title--font-size);
      font-weight: var(--slider-item-sub-title--font-weight);
      line-height: var(--slider-item-sub-title--line-height);
      text-transform: var(--slider-item-sub-title--transform);
      margin:0;
    }



  }

  .layout-builder & {
    /** avoid stacking in lb */
    display: block !important;
  }

  & .content {

    display: grid;
    gap: var(--slider-item--content-gap);
  }


}