:root {
  --avs-all-news-gap-mobile: .75rem;
  --avs-all-news-gap-tablet: 1.25rem;
  --avs-all-news-gap-desktop: 1.5rem;

  /* Hauteur d’une “case” de la grille. Ajuste cette valeur selon ton design. */
  --avs-all-news-row-height-mobile: 280px;
  --avs-all-news-col-width-mobile: 100%;
  --avs-all-news-row-height-tablet: 300px;
  --avs-all-news-col-width-tablet: 360px;
  --avs-all-news-row-height-desktop: 305px;
  --avs-all-news-col-width-desktop: 385px;
}

.block-avs-all-news-block {
    width: 100%;
}

.avs-news-block--all-news .avs-news-block__grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: var(--avs-all-news-row-height-mobile);
  gap: var(--avs-all-news-gap-mobile);

  width: 100%;
  margin-inline: auto;
}

/* Mobile: largeur pilotée par la variable (100% ou une valeur fixe) */
@media (max-width: 767.98px) {
  .avs-news-block--all-news .avs-news-block__grid {
    max-width: var(--avs-all-news-col-width-mobile);
  }
}

/* Tablette: 2 colonnes, largeur = (2 * col) + gap */
@media (min-width: 768px) and (max-width: 991.98px) {
  .avs-news-block--all-news .avs-news-block__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: var(--avs-all-news-row-height-tablet);
    gap: var(--avs-all-news-gap-tablet);

    max-width: calc((2 * var(--avs-all-news-col-width-tablet)) + var(--avs-all-news-gap-tablet));
  }

  /* sticky sur toute la largeur */
  .avs-news-block--all-news .avs-news-block__item--sticky {
    grid-column: 1 / -1;
  }
}

/* Desktop: 4 colonnes, largeur = (4 * col) + (3 * gap) */
@media (min-width: 992px) {
  .avs-news-block--all-news .avs-news-block__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: var(--avs-all-news-row-height-desktop);
    gap: var(--avs-all-news-gap-desktop);

    max-width: calc((4 * var(--avs-all-news-col-width-desktop)) + (3 * var(--avs-all-news-gap-desktop)));
  }

  .avs-news-block--all-news .avs-news-block__item--sticky {
    grid-column: span 2;
    grid-row: span 2;
  }
}