/* BEGIN COLLAGE (auto-generated) */
:root { --collage-columns: 2; }

#collage img:hover { transform: scale(1.04); }

.collage .wide { grid-column: span 2; }
.collage .tall { grid-row: span 2; }
.collage .big  { grid-column: span 2; grid-row: span 2; }

/* Irregular collage */
.collage {
  display: grid;
  grid-template-columns: repeat(var(--collage-columns), 1fr);
  grid-auto-rows: 120px;
  gap: 8px;
  padding: 20px;
  grid-auto-flow: dense;
  cursor: pointer;
  background: #eee url("collage_images/caravaggi.jpg") center/cover no-repeat;
}

.collage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 6px;
  cursor: zoom-in;
  transition: transform 0.2s;
}
/* END COLLAGE (auto-generated) */


/* Carousel */
.carousel {
position: relative;
overflow: hidden;
width: 100%;

/* Maintain aspect ratio (e.g. 16:9) */
aspect-ratio: 16 / 9;
margin-bottom:2rem;

}

/* Position all slides on top of each other */
.carousel img {
position: absolute;
inset: 0; /* shorthand for top:0; right:0; bottom:0; left:0 */
width: 100%;
height: auto;
object-fit: cover;

opacity: 0;
transition: opacity 2s ease-in-out;
z-index: 0;
pointer-events: none;
}

/* Show active image */
.carousel img.active {
opacity: 1;
z-index: 1;
pointer-events: auto;
}

/* Prevent first active image from "jumping in" */
.carousel img.active:first-child {
transition: none;
}

/* Only for very first load */
.carousel img.initial {
transition: none !important;
}