#slider {
  aspect-ratio: 12 / 8;
  padding: 20px;
}

.dp-wrap {
  margin: 0 auto;
  position: relative;
}

.dp-slider {
  width: 100%;
  position: absolute;
  transform-style: preserve-3d;
  left: 0;
}

.dp-slider div {
  transform-style: preserve-3d;
}

.dp_item {
  display: block;
  position: absolute;

  border-radius: 10px;
  transition: 1.2s;
}

#dp-slider .dp_item:first-child {
  z-index: 10 !important;
  transform: rotateY(0deg) translateX(0px);
  opacity: 1 !important;
}

.dp_item[data-position="2"] {
  z-index: 9;
  transform: rotateY(0deg) translateX(10%) translateY(10%) scale(0.9);
  opacity: 0.5 !important;
}

.dp_item[data-position="3"] {
  z-index: 8;
  transform: rotateY(0deg) translateX(20%) translateY(20%) scale(0.8);
  opacity: 0.2 !important;
}

.dp_item[data-position="4"] {
  transform: rotateY(0deg) translateX(-40%) /* translateY(30%) */;
  opacity: 0 !important;
  animation: 0.4s fade forwards;
  animation-delay: 1s;
}

@keyframes fade {
  0% {
  }
  100% {
    transform: rotateY(0deg) translateX(-5%) translateY(30%) scale(0.7);
  }
}

.dp_item {
  width: 85%;
}

.dp_item img {
  width: 100%;
}

.dp-content,
.dp-img {
  text-align: left;
}

.dp_item {
  display: flex;
  align-items: center;
  border-radius: 10px;

  object-fit: cover;
  aspect-ratio: 16 / 9;
  font-size: 0;
  box-shadow: 5.626702785491943px 5.626702785491943px 5.626702785491943px 0px
    #0000001a;
}

.dp-content {
  display: inline-block;
  width: 100%;
}

#dp-slider {
  height: 100%;
}