[data-component-id="skywin:article_card"] {

  --card-padding: 1.75rem;
  --card-spacing: .625rem;
  --card-text-color: var(--color-blue);
  --lp-h3-fs: var(--lp-lead-fs,20px);
  --lp-heading-fw: 400;


  /*--bottom-gradient: linear-gradient(to bottom, #F5F5F500 0%, #f5f5f554 50px, #f5f5f56e 40%, #f5f5f5b3 100%);*/
  --bottom-gradient: linear-gradient(to bottom, #0074aa00 0%, #0074aa54 50px, #0074aa6e 40%, #0074aab3 100%);
  --bottom-gradient-prime: linear-gradient(to bottom, #0074aa00 0%, #0074aa54 50px, #0074aa6e 40%, #0074aab3 100%);


  /* @todo Add your styles here. */
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  position: relative;
  color : var(--card-text-color);

  background-image:
    linear-gradient(
      to left,
      #857a82,  /* bleu-gris foncé en haut à gauche */
      #857a82 10%,  /* bleu-gris foncé en haut à gauche */
      #5c88aa ,  /* bleu moyen */
      #90cbd7  /* bleu clair en bas à droite */
    );
;

  &.prime{
    --card-text-color: #fff;
    --lp-heading-color: #fff;
    --lp-text-color: #fff;
  }

  & :is(.media,.content){
    grid-area: 1 / 1 / 2 / 2;
  }

  .layout-builder__section & {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;

    & :is(.media, .content){
      grid-area: auto;
    }
  }

  .media{
    max-height: 500px;
    & :is(.block, .field, .field-item, .field-items){
      display: contents;
    }
    & :is(img,picture){
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }
  }

  .content{
    display: flex;
    flex-direction: column;
    align-content: start;
    justify-content: space-between;
    gap: var(--card-spacing);
    background: linear-gradient(to top, #f5f5f5e6 0%, #f5f5f5c2 30%, #f5f5f59c 50%, #f5f5f500 100%);
    color: var(--card-text-color);

    :is(p,a,h1,h2,h3,h4,h5,h6,.title){
      color: var(--card-text-color);
      & > a{
        color: var(--card-text-color);

      }
    }

    .prime & {
      background: var(--bottom-gradient-prime);
    }
  }

  .top{
    width: 100%;
    padding: var(--card-padding);
    display: flex;
    gap: var(--card-spacing);
    .more{ margin-left: auto;}

  }
  .bottom{
    width: 100%;
    min-height: 166px;
    padding: var(--card-padding);
    padding-block-start: 50px;
    display: grid;
    gap: var(--card-spacing);
    align-self: end;
    /*background-image: var(--bottom-gradient);*/
  }

  .more{
    color: var(--card-text-color);
  }

  .title{
    color: var(--card-text-color);
  }

}