.oea-image-accordion,
.oea-image-accordion-hover-interaction {
  list-style-type: none;
  display: flex;
  height: 600px;
  gap: 0.5rem;
  padding: 0;
  margin: 0;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.oea-image-accordion.border-outer .item:first-child,
.oea-image-accordion-hover-interaction.border-outer .item:first-child {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.oea-image-accordion.border-outer .item:last-child,
.oea-image-accordion-hover-interaction.border-outer .item:last-child {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.oea-image-accordion.border-outer .item:not(:first-child):not(:last-child),
.oea-image-accordion-hover-interaction.border-outer
  .item:not(:first-child):not(:last-child) {
  border-radius: 0 !important;
}

.oea-image-accordion .item,
.oea-image-accordion-hover-interaction .item {
  position: relative;
  flex: 1;
  cursor: pointer;
  overflow: hidden;
  transition: all var(--grow-transition) ease;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.oea-image-accordion .item::after,
.oea-image-accordion-hover-interaction .item::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--animation-transition) ease;
}

.oea-image-accordion .item:not(.animation)::after,
.oea-image-accordion-hover-interaction .item:not(.animation)::after {
  opacity: 1;
}

.oea-image-accordion .item .oea-image-accordion-img,
.oea-image-accordion-hover-interaction .item .oea-image-accordion-img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.5);
  transition: all var(--transform-transition, 0.6s) ease,
    opacity var(--opacity-transition, 0.6s) ease var(--opacity-delay, 0.1s);
  z-index: 1;
}

.oea-image-accordion .item h2,
.oea-image-accordion .item p,
.oea-image-accordion-hover-interaction .item h2,
.oea-image-accordion-hover-interaction .item p {
  color: white;
  margin: 0;
  opacity: 0;
  transition: opacity 0s ease;
}

.oea-image-accordion .item:not(.animation) h2,
.oea-image-accordion .item:not(.animation) p,
.oea-image-accordion-hover-interaction .item:not(.animation) h2,
.oea-image-accordion-hover-interaction .item:not(.animation) p {
  opacity: 0;
  transition: none !important;
}

.oea-image-accordion .item h2,
.oea-image-accordion-hover-interaction .item h2 {
  bottom: 40px;
  text-overflow: clip;
  text-transform: uppercase;
  font-weight: 700;
}

.oea-image-accordion .item p,
.oea-image-accordion-hover-interaction .item p {
  bottom: 0;
}

.oea-image-accordion .item.animation,
.oea-image-accordion-hover-interaction .item.animation {
  flex: 5;
}

.oea-image-accordion .item.animation .oea-image-accordion-img,
.oea-image-accordion-hover-interaction
  .item.animation
  .oea-image-accordion-img {
  transform: scale(1);
  opacity: 0.6;
  transition: all var(--transform-transition, 0.6s) ease,
    opacity var(--opacity-transition, 0.6s) ease var(--opacity-delay, 0.1s);
}

.oea-image-accordion .item.animation h2,
.oea-image-accordion .item.animation p,
.oea-image-accordion-hover-interaction .item.animation h2,
.oea-image-accordion-hover-interaction .item.animation p {
  opacity: 1;
  transition: all 0.6s ease var(--grow-transition, 0.6s);
}

.oea-image-accordion .item.animation::before,
.oea-image-accordion-hover-interaction .item.animation::before {
  opacity: 1;
}

.oea-image-accordion .item::before,
.oea-image-accordion-hover-interaction .item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  background: #000;
  z-index: 0;

  transition: opacity var(--animation-transition, 0.6s) ease,
    background-color var(--animation-transition, 0.6s) ease;

  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.oea-image-accordion .image-accordion-text,
.oea-image-accordion-hover-interaction .image-accordion-text {
  position: absolute;
  width: 100%;
  left: 0;
  text-align: center;
  color: white;
  margin: 0;
  z-index: 2;
}

.oea-image-accordion .image-accordion-text.text-align-bottom,
.oea-image-accordion-hover-interaction .image-accordion-text.text-align-bottom {
  padding: 1rem 1rem 3rem 1rem;
  bottom: 0;
}

.oea-image-accordion .image-accordion-text.text-align-middle,
.oea-image-accordion-hover-interaction .image-accordion-text.text-align-middle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  bottom: initial;
  padding: 0;
}

.oea-image-accordion .image-accordion-text.text-align-top,
.oea-image-accordion-hover-interaction .image-accordion-text.text-align-top {
  padding: 3rem 1rem 1rem 1rem;
  top: 0;
}

.oea-image-accordion-hover-interaction:hover :not(.item:hover) {
  flex: 1;
  background: transparent;
}

.oea-image-accordion-hover-interaction:hover .item:not(:hover) h2,
.oea-image-accordion-hover-interaction:hover .item:not(:hover) p {
  opacity: 0 !important;
  transition: none !important;
}

.oea-image-accordion-hover-interaction:hover :not(.item:hover) img {
  transform: scale(1.5);
  opacity: 1 !important;
  transition: all var(--transform-transition, 0.6s) ease,
    opacity var(--opacity-transition, 0.6s) ease 0s;
}

.oea-image-accordion-hover-interaction .item:hover {
  flex: 5;
}

.oea-image-accordion-hover-interaction .item:hover img {
  opacity: 0.6;
  transform: scale(1);
  transition: all var(--transform-transition, 0.6s) ease,
    opacity var(--opacity-transition, 0.6s) ease var(--opacity-delay, 0.1s);
}

.oea-image-accordion-hover-interaction .item:hover h2,
.oea-image-accordion-hover-interaction .item:hover p {
  opacity: 1;
  transition: opacity 0.6s ease var(--grow-transition, 0.6s);
}

.oea-image-accordion-hover-interaction .item:hover::before {
  opacity: 1;
}

.oea-image-accordion.disable-active-background .item:hover::before,
.oea-image-accordion.disable-active-background .item.animation::before,
.oea-image-accordion-hover-interaction.disable-active-background
  .item:hover::before,
.oea-image-accordion-hover-interaction.disable-active-background
  .item.animation::before {
  opacity: 0 !important;
}

.oea-image-accordion.disable-inactive-overlay .item:not(.animation)::after,
.oea-image-accordion-hover-interaction.disable-inactive-overlay
  .item:not(.animation)::after {
  display: none !important;
}

.oea-image-accordion.disable-active-background
  .item.animation
  .oea-image-accordion-img,
.oea-image-accordion-hover-interaction.disable-active-background
  .item.animation
  .oea-image-accordion-img,
.oea-image-accordion-hover-interaction.disable-active-background
  .item:hover
  .oea-image-accordion-img {
  opacity: 1 !important;
}

.oea-image-accordion:not(.disable-inactive-overlay)
  .item:not(.animation)
  .oea-image-accordion-img,
.oea-image-accordion-hover-interaction:not(.disable-inactive-overlay)
  .item:not(.animation):not(:hover)
  .oea-image-accordion-img {
  opacity: var(--inactive-image-opacity, 1) !important;
}

@media (hover: none) and (pointer: coarse) {
  .oea-image-accordion .item,
  .oea-image-accordion-hover-interaction .item {
    transition: flex var(--grow-transition, 0.6s) ease,
      background-color var(--animation-transition, 0.6s) ease;
  }

  .oea-image-accordion .item::before,
  .oea-image-accordion-hover-interaction .item::before {
    transition: opacity var(--animation-transition, 0.6s) ease !important;
  }

  .oea-image-accordion .item:hover,
  .oea-image-accordion-hover-interaction .item:hover {
    background-color: initial !important;
  }

  .oea-image-accordion .item:not(.animation) h2,
  .oea-image-accordion .item:not(.animation) p,
  .oea-image-accordion-hover-interaction .item:not(.animation) h2,
  .oea-image-accordion-hover-interaction .item:not(.animation) p {
    transition: none !important;
    opacity: 0 !important;
  }

  .oea-image-accordion-hover-interaction:hover .item:not(:hover) h2,
  .oea-image-accordion-hover-interaction:hover .item:not(:hover) p {
    transition: none !important;
    opacity: 0 !important;
  }
}