.image-cycle {
  position: relative;
  width: 100%;
  max-width: 600px;          /* adjust to your design */
  aspect-ratio: 16 / 9;       /* keep consistent proportions */
  overflow: hidden;
/*
  margin-top: 5px;
*/
  margin-bottom: 30px;
}

.image-cycle img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;         /* or "contain" if you prefer */
  opacity: 0;
  animation: instantCycle 16s infinite;  /* 16s total = 4s per image */
}

/* Stagger each image */
.image-cycle img:nth-child(1) { animation-delay: 0s; }
.image-cycle img:nth-child(2) { animation-delay: 4s; }
.image-cycle img:nth-child(3) { animation-delay: 8s; }
.image-cycle img:nth-child(4) { animation-delay: 12s; }

@keyframes instantCycle {
  0%, 25%  { opacity: 1; }   /* fully visible */
  25.01%, 100% { opacity: 0; }  /* instantly hidden */
}

/* Accessibility: stop animation for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .image-cycle img {
    animation: none;
    opacity: 0;
  }
  .image-cycle img:first-child {
    opacity: 1;
  }
}