<style>
body {
  font-family: sans-serif;
  margin: 20px;
}

/* ===== MASONRY ===== */
.masonry {
  column-count: 4;
  column-gap: 12px;
}
@media (max-width: 900px) {
  .masonry { column-count: 3; }
}
@media (max-width: 500px) {
  .masonry { column-count: 2; }
}

.masonry a {
  display: inline-block;
  width: 100%;
  margin-bottom: 12px;
}

.masonry img {
  width: 100%;
  display: block;
  border-radius: 6px;
  cursor: zoom-in;
}
.masonry a {
  break-inside: avoid;
  page-break-inside: avoid;
}


/* ===== CAROUSEL ===== */
.carousel-wrapper {
  position: relative;
  overflow: hidden;
}

.carousel {
  display: flex;
  gap: 12px;

  overflow-x: auto;                 /* ← SCROLL NATIVO */
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* nascondi scrollbar ma NON lo scroll */
.carousel::-webkit-scrollbar {
  display: none;
}
.carousel {
  scrollbar-width: none; /* Firefox */
}

.carousel a {
  flex: 0 0 auto;
}

.carousel img {
  height: 180px;
  display: block;
  border-radius: 6px;
  cursor: zoom-in;
}

/* BOTTONI */
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;

  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;

  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: 28px;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel-btn.prev { left: 8px; }
.carousel-btn.next { right: 8px; }

.carousel-wrapper {
  overscroll-behavior-x: contain; /* blocca il rimbalzo orizzontale */
}

.carousel-btn {
  touch-action: manipulation; /* previene zoom doppio-tap */
  -ms-touch-action: manipulation;
}



</style>