.wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: flex-start;
}

/* Thumb simple grid stacking as requested */
.thumb {
  display: grid;
  place-items: end;
  width: clamp(9rem, 22vw, 14rem);
  /* s'adapte entre 9rem et 14rem */
  aspect-ratio: 3 / 4;
  border-radius: 1em;
  overflow: hidden;
}

/* text container sits on the same grid cell as the image */
.text-container {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  z-index: 1;
  height: max-content;
  width: 100%;
  background: rgba(85, 82, 104, 0.711);
  color: white;
  font-size: large;
  border-bottom-left-radius: 1em;
  border-bottom-right-radius: 1em;
  margin: 0;
  /* remove default p margin */
  padding: 0.6rem 0.9rem;
  box-sizing: border-box;
  text-align: center;
  pointer-events: none;
  /* let clicks pass to image if needed */
}

/* image occupies the same grid cell, behind the text */
.thumb img {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 1em;
}


/* Optional: make the text more visible on hover (non-intrusive) */
.thumb:hover .text-container {
  background: rgba(85, 82, 104, 0.85);
}

/* Responsive: reduce width on small screens */
@media (max-width: 900px) {
  .thumb {
    width: 18rem;
  }
}

@media (max-width: 480px) {
  .thumb {
    width: 14rem;
  }

  .text-container {
    font-size: medium;
    padding: 0.45rem 0.6rem;
  }
}