.wgcs-container {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.wgcs-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: opacity 10.0s ease-in-out;
  opacity: 0;
  z-index: 1;
}

.wgcs-img.visible {
  opacity: 1;
  z-index: 2;
}
/* original styles - end */

/* WGCS Fade Overlay Styles
   - JS toggles .visible class every 10s
   - Debug styles force visibility in preview
   - Avoid using animation keyframes; use class toggling for clarity
*/
/* debug override styles */
/* DEBUG: Force container visibility */
.wgcs-container.debug-visible {
  outline: 2px dashed red;
  min-height: 300px;
  overflow: visible !important;
  position: relative;
  z-index: 10;
}

/* DEBUG: Force image visibility */
.wgcs-container.debug-visible .wgcs-img {
  opacity: 1 !important;
  border: 2px solid lime;
  max-width: 100%;
  height: auto;
  display: block;
}


/* - not needed
.img1 {
  z-index: 1;
  animation: fadeOut 20s infinite;
}

.img2 {
  z-index: 2;
  animation: fadeIn 20s infinite;
}
*/