/* --- 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: #000;            /* 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;                 /* nixes inline gaps */
  object-fit: cover;              /* keep the framing right */
  opacity: 0;
  animation-duration: 8s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  backface-visibility: hidden;    /* helps with faint seams on iOS */
}

/* Z-order + animations (unchanged) */
.image1 { z-index: 1; animation-name: fadeImage1; }
.image2 { z-index: 2; animation-name: fadeImage2; }

@keyframes fadeImage1 {
  0%,25% { opacity: 1; }
  50%,75% { opacity: 0; }
  100% { opacity: 1; }
}
@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; }
}