.custom-image-accordion {
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  
  .custom-image-accordion.horizontal {
    flex-direction: row;
    height: 655px; /* or whatever height you want */
	padding: 0 4rem;
  }
  
  .custom-image-accordion.vertical {
    flex-direction: column;
    width: 1000px; /* or whatever width you want */
  }
  
  .accordion-item {
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: flex-basis var(--accordion-transition, 400ms) ease;
  }

  
  .accordion-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures cropping */
    display: block;
  }
  
  /* Horizontal behavior: equal height, variable width */
  .custom-image-accordion.horizontal .accordion-item {
    height: 100%; /* All have same height */
    transition:  flex-basis var(--accordion-transition) ease-in-out;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 3.75%; /* collapsed state */
    overflow: hidden; /* collapsed state = narrow width */
  }
  .custom-image-accordion.horizontal .accordion-item img{
    min-width: 100%;
	height: 100%;
  }

  .custom-image-accordion.horizontal .accordion-item.active {
    flex-basis: calc(100% - (var(--inactive-count, 0) * 3.75%)); /* expanded = wide */
  }

  .custom-image-accordion:has(.accordion-item:only-child) .accordion-item {
    flex-basis: 100% !important;
}
  /* Vertical behavior: equal width, variable height */
  .custom-image-accordion.vertical .accordion-item {
    width: 100%;
    height: auto;
    flex: 0 0 60px; /* collapsed state = short height */
  }
  
 
  
  .circular-progress {
    position: absolute;
    bottom: 10px;
    left: 10px;
    width: 40px;
    height: 40px;
    z-index: 10;
}

.circular-progress svg {
    transform: rotate(-90deg);
    width: 100%;
    height: 100%;
}

.circular-progress path {
    fill: none;
    stroke-width: 3;
}

.circular-progress .bg {
    stroke: #E7E7E7;
	opacity: 0.5;
}

.circular-progress .progress {
    stroke: #FFF;
    transition: stroke-dasharray 0.5s ease;
}
@media (max-width: 576px) {
  .custom-image-accordion.horizontal {
    flex-direction: row;
    height: auto;
	padding: 0;
  }

/*   .custom-image-accordion.vertical {
    width: 100%;
  } */

  .custom-image-accordion.horizontal .accordion-item,
  .custom-image-accordion.horizontal .accordion-item.active {
    
    width: 100%;
    height: 30rem;
  }

  .custom-image-accordion.vertical .accordion-item {
    flex: 0 0 4rem; /* Reduced from 6rem (60px) */
  }

  .circular-progress {
    bottom: 0.5rem;
    left: 0.5rem;
    width: 2.5rem;
    height: 2.5rem;
  }

  .circular-progress path {
    stroke-width: 0.2rem;
  }
}