/* ===============================
   BASE
   =============================== */
body {
	font-family: "Poppins", sans-serif;
}

/* ===============================
   GALLERY ATTIVITÀ – DEFINITIVO
   HTML atteso:
   <div class="gallery-by-month">
     <h2 class="gallery-month">Aprile 2026</h2>
     <div class="month-grid">
       <a class="month-item"><img></a>
     </div>
   </div>
   =============================== */

/* ---- Titolo mese ---- */
.gallery-by-month .gallery-month {
	margin: 2.5rem 0 1rem;
	padding-bottom: 0.6rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.25);
	font-size: 1.3rem;
}

/* ---- GRIGLIA (spazi VERI) ---- */
.gallery-by-month .month-grid {
	display: grid;

	/* COLONNE STABILI (Instagram-like) */
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));

	/* SPAZI TRA LE IMMAGINI */
	column-gap: 18px;
	row-gap: 18px;

	padding: 10px;
	margin-bottom: 28px;
}

/* ---- TILE ---- */
.gallery-by-month .month-item {
	display: block;
	overflow: hidden;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.06);
}

/* ---- IMMAGINI QUADRATE ---- */
.gallery-by-month .month-item img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1; /* quadrato perfetto */
	object-fit: cover; /* crop tipo Instagram */
	margin: 0;
	transition:
		transform 0.25s ease,
		filter 0.25s ease;
}

/* ---- HOVER ---- */
.gallery-by-month .month-item:hover img {
	transform: scale(1.05);
	filter: brightness(0.92);
}

/* ---- RESPONSIVE ---- */
@media (max-width: 600px) {
	.gallery-by-month .month-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 601px) and (max-width: 1023px) {
	.gallery-by-month .month-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1024px) {
	.gallery-by-month .month-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}