:root {

  --simple-card--gap: 2rem;
  --simple-card--text-align: center;

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

  --simple-card--content-gap: .5rem;
  --simple-card--spacing: var(--spacing-md);
  --simple-card--font-size : .85rem;
  --simple-card--title-font-size : 1.125rem;

  --simple-card--header-spacing: var(--spacing-md) var(--spacing-md) 0 var(--spacing-md);
  --simple-card--header-bg: var(--color-primary-tr);
  --simple-card--header-color: var(--color-primary);
  --simple-card--header-color-hover: var(--color-primary);

  --simple-card--footer-spacing: var(--spacing-sm) var(--spacing-md);
  --simple-card--footer-bg: #fff;
  /*--simple-card--footer-bg: var(--color-primary-tr);*/
  --simple-card--footer-color: var(--color-primary);
  --simple-card--footer-color-hover: var(--color-primary);

}

[data-component-id="picard25:simple_card"] {
  /* @todo Add your styles here. */
  font-size: var(--simple-card--font-size);
  text-align: var(--simple-card--text-align);
  display: grid;
  gap: var(--simple-card--gap);

  & header{
    & :is(.block_content, .field, .field__item){ display: contents ;}
    & .field-field-media{
      width: 100%;
      aspect-ratio: 17/13;
      max-width: 130px;
      margin: 0 auto;
      :is(img,svg){
        width: 100%;
        height: 100%;
        object-fit:contain;
      }
    }
  }

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


  &.clean{
    padding: var(--simple-card--spacing);
  }

  &.themed{
    border: var(--simple-card--border-width) solid var(--simple-card--border-color);
    border-radius: var(--simple-card--border-radius);
    overflow: hidden;

    & header{
      background-color: var(--simple-card--header-bg);
      color: var(--simple-card--header-color);
      padding: var(--simple-card--header-spacing);

      display: flex;
      gap: 1rem;
      align-items: start;
      & a{
        color: var(--simple-card--header-color);
        &:hover{
          color: var(--simple-card--header-color-hover);
        }
      }
      & :is(h1,h2,h3,h4,h5,h6){
        margin: 0;
        color: var(--simple-card--header-color);
      }

      & .card-title{
        font-size: var(--simple-card--title-font-size);
      }

    }
    & .content{
      padding: var(--simple-card--spacing);
    }
    & footer{
      background-color: var(--simple-card--footer-bg);
      color: var(--simple-card--footer-color);
      padding: var(--simple-card--footer-spacing);
      text-align: right;

      & a{
        color: var(--simple-card--footer-color);
        &:hover{
          color: var(--simple-card--footer-color-hover);
        }
      }
      & :is(h1,h2,h3,h4,h5,h6){
        margin: 0;
        color: var(--simple-card--footer-color);
      }
    }
  }
}