.page-standard__supporting .dc-draggable-card,
.product-details-layout__media.js-page-draggable-supporting .dc-draggable-card {
  position: relative;
  translate: calc(var(--dc-card-offset-x, 0px) + var(--dc-card-drag-x, 0px))
    var(--dc-card-drag-y, 0px);
  rotate: var(--dc-card-current-rotation, var(--dc-card-rotation, 0deg));
  scale: var(--dc-card-scale, 1);
  transform-origin: center center;
  transition: rotate 620ms cubic-bezier(0.22, 1, 0.36, 1),
    scale 280ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 260ms ease;
  will-change: translate, rotate, scale;
  cursor: grab;
  overflow: visible;
  background: #fff;
  border: 0;
  padding: 0.9rem;
  box-shadow: 0 9px 24px rgba(0, 0, 0, 0.3);
  opacity: 0;
  animation: dc-page-supporting-image-fade 1800ms ease forwards;
  isolation: isolate;
}

.page-standard__supporting .dc-draggable-card img,
.product-details-layout__media.js-page-draggable-supporting .dc-draggable-card img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.page-standard__supporting .dc-draggable-card::after,
.product-details-layout__media.js-page-draggable-supporting .dc-draggable-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 24% 18%, rgba(42, 38, 32, 0.05) 0, rgba(42, 38, 32, 0) 52%),
    radial-gradient(circle at 78% 72%, rgba(42, 38, 32, 0.045) 0, rgba(42, 38, 32, 0) 56%),
    repeating-linear-gradient(
      0deg,
      rgba(64, 58, 50, 0.025) 0,
      rgba(64, 58, 50, 0.025) 1px,
      rgba(255, 255, 255, 0) 1px,
      rgba(255, 255, 255, 0) 3px
    );
  opacity: 0.55;
  mix-blend-mode: multiply;
}

.page-standard__supporting .dc-draggable-card.is-dragging,
.product-details-layout__media.js-page-draggable-supporting .dc-draggable-card.is-dragging {
  cursor: grabbing;
  --dc-card-current-rotation: 0deg;
  --dc-card-scale: 1.22;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.45);
}

.page-standard__supporting .dc-draggable-card:hover,
.product-details-layout__media.js-page-draggable-supporting .dc-draggable-card:hover {
  --dc-card-scale: 1.05;
  box-shadow: 0 15px 34px rgba(0, 0, 0, 0.36);
}

.page-standard__supporting .dc-draggable-card.is-dragging:hover,
.product-details-layout__media.js-page-draggable-supporting .dc-draggable-card.is-dragging:hover {
  --dc-card-scale: 1.22;
}

.page-standard__supporting .dc-draggable-card:nth-child(1),
.product-details-layout__media.js-page-draggable-supporting .dc-draggable-card:nth-child(1) {
  animation-delay: 0ms;
}

.page-standard__supporting .dc-draggable-card:nth-child(2),
.product-details-layout__media.js-page-draggable-supporting .dc-draggable-card:nth-child(2) {
  animation-delay: 500ms;
}

.page-standard__supporting .dc-draggable-card:nth-child(3),
.product-details-layout__media.js-page-draggable-supporting .dc-draggable-card:nth-child(3) {
  animation-delay: 1000ms;
}

.page-standard__supporting .dc-draggable-card:nth-child(4),
.product-details-layout__media.js-page-draggable-supporting .dc-draggable-card:nth-child(4) {
  animation-delay: 1500ms;
}

@keyframes dc-page-supporting-image-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (max-width: 900px) {
  .page-standard__supporting.js-page-draggable-supporting,
  .product-details-layout__media.js-page-draggable-supporting {
    display: grid;
    gap: 1rem;
  }

  .page-standard__supporting .dc-draggable-card,
  .product-details-layout__media.js-page-draggable-supporting .dc-draggable-card {
    translate: none;
    rotate: 0deg;
    scale: 1;
    margin-top: 0;
    cursor: default;
    padding: 0.65rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-standard__supporting .dc-draggable-card,
  .product-details-layout__media.js-page-draggable-supporting .dc-draggable-card {
    animation: none;
    opacity: 1;
  }
}
