/* Container: you can use data-slots to control columns */
.img-rot {
  display: grid;
  gap: .5rem;
  grid-template-columns: repeat(var(--slots, 3), 1fr);
}

/* Lock height so layout doesn't jump */
.img-rot__slot {
  position: relative;
  height: var(--slot-h, 150px); /* adjust per page */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Link stretches to slot so click area is nice */
.img-rot__slot a {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Image behavior */
.img-rot__slot img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  display: block;

  opacity: 0;
  transition: opacity 650ms ease;
}

.img-rot__slot img.is-visible {
  opacity: 1;
}