:root {

  --media-card--border-width : 0px;
  --media-card--border-radius : var(--radius-media);
  --media-card--border-color : var(--color-primary-tr);



  --media-card--content-gap: 1.25rem;
  --media-card--spacing: var(--spacing-auto-lg);
  --media-card--font-size: .85rem;

  --media-card-title--font: var(--font-button,'Arial sans-serif');
  --media-card-title--font-size: var(--font-size-h3);
  --media-card-title--font-weight: 300;
  --media-card-title--transform: uppercase;
  --media-card-title--line-height: 1;

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

  --media-card--color: var(--color-on-dark, #fff);
  --media-card--bg: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 50%);

  /*--media-card--title-font-size: 2.5rem;*/
  /*--media-card--title-font-weight: 300rem;*/
  /*--media-card--title-line-height: 1.2;*/

  /*--media-card--sub-title-font-size: .1.5rem;*/
  /*--media-card--sub-title-font-weight: 300rem;*/



}

[data-component-id="picard25:media_card"] {
  /* @todo Add your styles here. */



  font-size: var(--media-card--font-size);
  border: var(--media-card--border-width) solid var(--media-card--border-color);

  & > .card-wrapper{
    isolation: isolate;
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;

    &.trig-target{
      display: grid !important;

    }
  }



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

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

    & :is( img, video, embed, object, iframe, picture){
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  & .content-wrapper{
    z-index: 2;
    grid-area: 1 / 1 / 2 / 2;

    --text-color: var(--media-card--color);
    --headings-color: var(--media-card--color);
    --link-color: var(--media-card--color);
    --button-color: var(--media-card--color);
    --button-border--color: var(--media-card--color);

    padding: var(--media-card--spacing);
    background: var(--media-card--bg, transparent);
    color: var(--media-card--color);
    display: grid;
    gap: var(--media-card--content-gap);
    align-items: start;
    justify-content: start;
    grid-auto-rows: max-content;


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


  }

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

  & .content {
    display: grid;
    gap: var(--media-card--content-gap);
  }

  &.media-card--content-bottom,
  &.media-card--portrait
  {

    --media-card--content-gap: .25rem;
    --media-card--bg: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 50%);


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

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


    & .content-wrapper{
      align-content: end;
      grid-template-columns: 1fr max-content;

      & .link-wrapper{ align-self: end;}
    }


  }

  &.media-card--portrait{
    --media-card--spacing: var(--spacing-auto-sm);

    .media-wrapper{
      :is( img, video, embed, object, iframe){
        transition: filter 500ms ease-in-out;
        filter: grayscale(100%);
      }
    }
    /*&:hover{*/
    /*  .media-wrapper{*/
    /*    :is( img, video, embed, object, iframe){*/
    /*      !*filter: grayscale(0%);*!*/
    /*    }*/
    /*  }*/
    /*}*/
  }





}