Galerie masonry

<style>
.bn-masonry {
  /* La technique masonry ici : on découpe en colonnes (comme un
     journal) et chaque image s'empile dans la colonne la moins
     remplie — 100% CSS, aucun JavaScript. */
  column-count: 4;
  column-gap: 0.75rem;

  padding: 1.5rem;
  background: #0B0F10;
}

.bn-masonry__item {
  width: 100%;
  display: block;
  margin-bottom: 0.75rem;
  border-radius: 4px;

  /* Empêche une image d'être coupée entre deux colonnes */
  break-inside: avoid;

  filter: grayscale(15%);
  transition: filter 0.3s ease, transform 0.3s ease;
}

.bn-masonry__item:hover {
  filter: grayscale(0%);
}

.bn-masonry__item--short { aspect-ratio: 4 / 3; object-fit: cover; height: 180px; }
.bn-masonry__item--tall { aspect-ratio: 3 / 4; }

@media (max-width: 900px) {
  .bn-masonry { column-count: 3; }
}

@media (max-width: 600px) {
  .bn-masonry { column-count: 2; }
}

</style>

<div class="bn-masonry">
  <img src="https://placehold.co/400x520" alt="Silhouette dans la brume" class="bn-masonry__item bn-masonry__item--tall" />
  <img src="https://placehold.co/400x400" alt="Anneau sombre" class="bn-masonry__item" />
  <img src="https://placehold.co/400x480" alt="Forêt brumeuse" class="bn-masonry__item bn-masonry__item--tall" />
  <img src="https://placehold.co/400x320" alt="Montagne au loin" class="bn-masonry__item bn-masonry__item--short" />
  <img src="https://placehold.co/400x460" alt="Vallée encaissée" class="bn-masonry__item bn-masonry__item--tall" />
  <img src="https://placehold.co/400x360" alt="Lune voilée" class="bn-masonry__item" />
  <img src="https://placehold.co/400x300" alt="Arbre isolé" class="bn-masonry__item bn-masonry__item--short" />
  <img src="https://placehold.co/400x440" alt="Ondes sur l'eau" class="bn-masonry__item bn-masonry__item--tall" />
</div>