.image-accordion {
  display: flex;
  width: 100%;
  height: 60vh;
  overflow: hidden;
}
.image-accordion-item {
  flex-grow: 1;
  flex-basis:0;
  transition: flex-grow 0.5s ease;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  color: white;
  height:100%;
}
.image-accordion-item.active {
  flex-grow: 4;
  transition:all 0.6s ease;
}
.image-accordion-desc {
    position: absolute;
    bottom: 60px;
    opacity: 0;
    text-align: center;
    width:80%;
}
.image-accordion-item.active .image-accordion-desc {
  transition:all 0.8s ease;
  transition-delay:0.6s;
  opacity:1;  
}
@media (max-width: 768px) {
  .image-accordion {
    display: block !important;
    height:auto;
  }

  .image-accordion-item {
    display:block !important;
    width: 100%;
    height: auto;
    padding: 40px !important;
    margin-bottom: 0px;
  }
  .image-accordion-desc {
    position:relative;
    bottom:0px;
    text-align:left;
    opacity: 1;
}
}

// 모든 아코디언 항목에 이벤트 리스너 추가
document.querySelectorAll(".image-accordion-item").forEach(item => {
  item.addEventListener("mouseenter", () => {
    document.querySelectorAll(".image-accordion-item").forEach(el => {
      el.classList.remove("active");
    });
    item.classList.add("active");
  });

  item.addEventListener("mouseleave", () => {
    item.classList.remove("active");
  });
});