/* --- crossfade.css (revised) --- */

/* Square, responsive, edge-to-edge */
.crossfade-container {
  position: relative;
  inline-size: min(100%, 420px);  /* cap at 420px but stay fluid */
  aspect-ratio: 1 / 1;
  margin-inline: auto;
  overflow: hidden;
  /* Top corners follow the card’s inner curve; bottom corners square */
  border-top-left-radius: var(--bs-card-inner-border-radius, var(--bs-card-border-radius, .75rem));
  border-top-right-radius: var(--bs-card-inner-border-radius, var(--bs-card-border-radius, .75rem));
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  background: #3077be;            /* fallback color under images; orig was bg color #0c69d3*/
  box-sizing: border-box;
  transform: translateZ(0);       /* avoids 1px seams on some mobiles */
}

/* If you keep the image block inside .card-body,
   cancel the built-in padding so the image bleeds to the edges */
.card-body > .crossfade-container {
  margin-inline: calc(var(--bs-card-spacer-x) * -1);
  margin-top: calc(var(--bs-card-spacer-y) * -1);
  margin-bottom: 0;
  inline-size: auto;              /* let the negative margins set width */
}

/* Each slide fills the square */
.crossfade-container img,
.crossfade-container .image,
.image-wrapper .image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  backface-visibility: hidden;
}

/* Image 1 is always the opaque base */
.image1 {
  z-index: 1;
  opacity: 1;
}

/* Image 2 fades in over image 1, then fades back out */
.image2 {
  z-index: 2;
  opacity: 0;
  animation: fadeImage2 8s ease-in-out infinite;
}

@keyframes fadeImage2 {
  0%, 25% {
    opacity: 0;
  }

  50%, 75% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}
/* Mobile cap if you still want it smaller on xs */
@media (max-width: 576px) {
  .card-body > .crossfade-container {
    /* keep the bleed, but don’t exceed the viewport */
    inline-size: auto;
  }
}

/* Optional fallback if a very old browser lacks aspect-ratio */
@supports not (aspect-ratio: 1 / 1) {
  .crossfade-container::before {
    content: "";
    display: block;
    padding-top: 100%;
  }
  .crossfade-container > * { position: absolute; inset: 0; }
}