.deensimc-ia-main-container {
  --img-width: 156px;
  --img-open-width: 320px;
  --img-height: 19rem;
  --overlay-color: rgba(0, 0, 0, 0);
  --overlay-color-hover: rgba(0, 0, 0, 0.5);
  --deensimc-item-gap: 0.5rem;
  --deensimc-container-padding: 4rem;

  --hover-z: 17.375rem;
  --r1-z: 14.77rem;
  --r2-z: 9.73rem;
  --r3-z: 4.17rem;
  --r4-z: 1.1rem;

  --r1-rotate: 35deg;
  --r2-rotate: 40deg;
  --r3-rotate: 35deg;
  --r4-rotate: 25deg;

  --transition: cubic-bezier(0.1, 0.7, 0, 1);
  --transition-duration: 0.4s;

  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: var(--deensimc-container-padding);
}

.deensimc-ia-media-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: var(--deensimc-item-gap);
  perspective: 60rem;
}

.deensimc-ia-item {
  width: var(--img-width);
  height: var(--img-height);
  cursor: pointer;
  transition: transform 1.25s var(--transition),
    width var(--transition-duration) var(--transition);
  position: relative;
  will-change: transform, filter;
  flex-shrink: 0;
  isolation: isolate;

  &::after,
  &::before {
    position: absolute;
    content: "";
    width: calc(var(--deensimc-item-gap) * 1.5);
    height: 100%;
    top: 0;
  }

  &::before {
    left: calc(calc(var(--deensimc-item-gap) * 1.5) * -1);
  }
  &::after {
    right: calc(calc(var(--deensimc-item-gap) * 1.5) * -1);
  }
}

.deensimc-ia-item-content-container {
  position: relative;
  border-radius: 0.5rem;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

/* Image */
.deensimc-ia-item .deensimc-ia-item-image {
  z-index: -1;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  transition: width var(--transition-duration) var(--transition),
    filter var(--transition-duration) var(--transition);
}
/* Overlay */
.deensimc-ia-item-overlay {
  background-color: var(--overlay-color, rgba(0, 0, 0, 0));
  position: absolute;
  inset: 0;
  width: 100%;
  z-index: 1;
  transition: background-color 3s var(--transition);
}

/* Content */
.deensimc-ia-item-content {
  position: absolute;
  inset: 0;
  padding: 1rem; /* Dynamic */
  background-color: transparent;
  color: white;
  opacity: 0;
  transition: opacity var(--transition-duration) var(--transition),
    transform var(--transition-duration) var(--transition),
    width var(--transition-duration) var(--transition);
  transform: translateY(110%) scale(0);
  transform-origin: bottom left;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: end;
  text-align: center;
  width: 100%;
  z-index: 2;
}

.deensimc-ia-item-content .deensimc-ia-item-title {
  margin-top: 0;
  margin-bottom: 0.5rem;
  color: white;
}

.deensimc-ia-item-content .deensimc-ia-item-description {
  margin-bottom: 0.5rem;
  font-size: 0.6rem;
  line-height: 1.5;
}

.deensimc-ia-item-content .deensimc-ia-item-btn {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.5rem;
  background-color: #007bff;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  font-size: 0.7rem;
  pointer-events: auto;
}

.deensimc-ia-item-btn .deensimc-ia-item-btn-icon {
  display: flex;
  svg {
    width: 0.7rem;
    height: 0.7rem;
    fill: #fff;
  }
}

.deensimc-ia-item-content .deensimc-ia-item-btn:hover {
  background-color: #0056b3;
}

/*
Open on hover
*/
.deensimc-ia-media-wrapper:not(.deensimc-ia-item-has-open)
  .deensimc-ia-item:hover {
  transform: translateZ(var(--hover-z));
}
/* 
.deensimc-ia-open-on-hover
  .deensimc-ia-media-wrapper:not(.deensimc-ia-item-has-open)
  .deensimc-ia-item:hover {
  width: max(var(--img-open-width), var(--img-width));
}

.deensimc-ia-open-on-hover .deensimc-ia-item:hover .deensimc-ia-item-content {
  opacity: 1;
  transform: translate(0) scale(1);
}
*/

.deensimc-ia-item:hover .deensimc-ia-item-overlay {
  background-color: var(--overlay-color-hover, rgba(0, 0, 0, 0.5));
}

/* Right side siblings on hover */
.deensimc-ia-media-wrapper:not(.deensimc-ia-item-has-open)
  .deensimc-ia-item:hover
  + * {
  transform: translateZ(var(--r1-z)) rotateY(var(--r1-rotate));

  z-index: -1;
}

.deensimc-ia-media-wrapper:not(.deensimc-ia-item-has-open)
  .deensimc-ia-item:hover
  + *
  + * {
  transform: translateZ(var(--r2-z)) rotateY(var(--r2-rotate));

  z-index: -2;
}

.deensimc-ia-media-wrapper:not(.deensimc-ia-item-has-open)
  .deensimc-ia-item:hover
  + *
  + *
  + * {
  transform: translateZ(var(--r3-z)) rotateY(var(--r3-rotate));

  z-index: -3;
}

.deensimc-ia-media-wrapper:not(.deensimc-ia-item-has-open)
  .deensimc-ia-item:hover
  + *
  + *
  + *
  + * {
  transform: translateZ(var(--r4-z)) rotateY(var(--r4-rotate));

  z-index: -4;
}

/* Left side siblings on hover */
.deensimc-ia-media-wrapper:not(.deensimc-ia-item-has-open)
  .deensimc-ia-item:has(+ :hover) {
  transform: translateZ(var(--r1-z)) rotateY(calc(-1 * var(--r1-rotate)));
}

.deensimc-ia-media-wrapper:not(.deensimc-ia-item-has-open)
  .deensimc-ia-item:has(+ * + :hover) {
  transform: translateZ(var(--r2-z)) rotateY(calc(-1 * var(--r2-rotate)));
}

.deensimc-ia-media-wrapper:not(.deensimc-ia-item-has-open)
  .deensimc-ia-item:has(+ * + * + :hover) {
  transform: translateZ(var(--r3-z)) rotateY(calc(-1 * var(--r3-rotate)));
}

.deensimc-ia-media-wrapper:not(.deensimc-ia-item-has-open)
  .deensimc-ia-item:has(+ * + * + * + :hover) {
  transform: translateZ(var(--r4-z)) rotateY(calc(-1 * var(--r4-rotate)));
}

/* 
Open on click
*/
.deensimc-ia-item.deensimc-ia-item-open {
  transform: translateZ(var(--hover-z));
  z-index: 10;
}

.deensimc-ia-item.deensimc-ia-item-open {
  width: max(var(--img-open-width), var(--img-width));
}

.deensimc-ia-item.deensimc-ia-item-open .deensimc-ia-item-content {
  opacity: 1;
  transform: translate(0) scale(1);
}

.deensimc-ia-item.deensimc-ia-item-open .deensimc-ia-item-overlay {
  background-color: var(--overlay-color-hover, rgba(0, 0, 0, 0.5));
}

/* Right side siblings when open */
.deensimc-ia-item.deensimc-ia-item-open + * {
  transform: translateZ(var(--r1-z)) rotateY(var(--r1-rotate));
  z-index: -1;
}
.deensimc-ia-item.deensimc-ia-item-open + * + * {
  transform: translateZ(var(--r2-z)) rotateY(var(--r2-rotate));
  z-index: -2;
}
.deensimc-ia-item.deensimc-ia-item-open + * + * + * {
  transform: translateZ(var(--r3-z)) rotateY(var(--r3-rotate));
  z-index: -3;
}
.deensimc-ia-item.deensimc-ia-item-open + * + * + * + * {
  transform: translateZ(var(--r4-z)) rotateY(var(--r4-rotate));
  z-index: -4;
}

/* Left side siblings when open */
.deensimc-ia-item:has(+ .deensimc-ia-item.deensimc-ia-item-open) {
  transform: translateZ(var(--r1-z)) rotateY(calc(-1 * var(--r1-rotate)));
}
.deensimc-ia-item:has(+ * + .deensimc-ia-item.deensimc-ia-item-open) {
  transform: translateZ(var(--r2-z)) rotateY(calc(-1 * var(--r2-rotate)));
}
.deensimc-ia-item:has(+ * + * + .deensimc-ia-item.deensimc-ia-item-open) {
  transform: translateZ(var(--r3-z)) rotateY(calc(-1 * var(--r3-rotate)));
}
.deensimc-ia-item:has(+ * + * + * + .deensimc-ia-item.deensimc-ia-item-open) {
  transform: translateZ(var(--r4-z)) rotateY(calc(-1 * var(--r4-rotate)));
}