.doors-wrap.wrapper {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1rem;
}

.door-media {
  position: relative;
  width: 100%;
  aspect-ratio: var(--ratio, 3/5);
  border-radius: 8px;
  overflow: hidden;
  transition: transform .25s ease, filter .25s ease;
  background: linear-gradient(90deg, #f2f2f2 0%, #e9e9e9 50%, #f2f2f2 100%);
  background-size: 200% 100%;
  animation: doors-shimmer 1.2s infinite linear;
}

@media (hover:hover) {
  .door-card:hover {
    z-index: 5;
    transform: scale(1.05);
    filter: drop-shadow(0 8px 22px rgba(0,0,0,.25));
    
  }
}
.door-media img { opacity: 0; transition: opacity .25s ease; display:block; width:100%; height:auto; }
.door-media.is-loaded img { opacity: 1; }
.door-media.is-loaded { animation: none; background: transparent; }

#doors-grid {
  position: relative;
  --gap: 24px;
  --colw: 150px;
  min-height: 200px;
}
#doors-grid.measuring .door-card { position: static !important; }

.door-card {
  position: absolute;
  left: 0; top: 0;
  width: var(--colw);
  margin: 0;
  transition: transform .5s ease;
}

.door {
  display: block;
  transform: translate3d(var(--dx,0px), var(--dy,0px), 0) rotate(var(--rot,0deg));
  will-change: transform;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

@keyframes doors-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}