svg.svg-carousel {
  width: 100%;
  max-width: 645px;   /* scales down nicely on small screens */
  height: auto;
  display: block;
  margin: 20px auto;
}

.svg-slide {
  position: absolute;
  opacity: 0;
  transition: opacity 2s ease-in-out;
  pointer-events: none; /* prevent invisible slides from catching hover */
}

.svg-slide.is-active {
  opacity: 1;
  pointer-events: auto; /* only active slide responds */
}

.svg-caption-box {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 2.0s ease, transform 2.0s ease-in-out;
}

/* .svg-caption-box div {                          */
/*   max-width: 90%;    keep from going full width */
/* margin: 0 auto;    center inside foreignObject  */
/* }                                               */

.svg-caption-box div {
   width: 100%;        /* span full foreignObject width */
   /* max-width: 90%;      optional: keep text from touching edges */
   margin: 0 auto;     /* center the div itself */
   text-align: center; /* center the text inside */
}

.caption-text {
   /* display: inline-block; */
   background: rgba(255,255,255,0.8);
   /*padding: 6px 12px;*/
   padding: 3px 6px;
   border-radius: 8px;
   color:black;  
   font-size: 16px;
   text-align: center;
   white-space: normal;       /* allow wrapping */
   word-wrap: break-word;     /* break long words */
   overflow-wrap: break-word; /* robust wrapping */
   max-width: 100%;           /* fit inside the parent <foreignObject> */  
}

.svg-slide.is-active .svg-caption-box {
  opacity: 1;
  transform: translateY(0);
}

.svg-dot {
  fill: #bbb;
  cursor: pointer;
  transition: fill 0.3s;
}

.svg-dot.is-active { fill: #333; }

/* Hover effect on active slide image */
.svg-slide image {
  transition: transform 0.6s ease-in-out, filter 0.6s ease-in-out;
  transform-origin: center center;
}

.svg-slide.is-active:hover image {
  transform: scale(1.08);
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.35));
  z-index: 2;
}
/*
@media (max-width: 600px) {
  .svg-caption-box {
    display: none !important;
  }
}
*/

@media (max-width: 600px) {
  /* Make the <foreignObject> caption container full width */
  .svg-caption-box {
      width: 100%; 
      x: 0;        
  } 
  
  /* Increase the font size of the text inside the caption box */
  .svg-caption-box .caption-text {
      /* font-size: 1.25rem;   !important;    about 20px, adjust as needed */
      font-size: 1.30rem !important;
      line-height: 1.4;
  }
}