.draggable-images-wrapper {
  margin: 0 auto !important; /* center wrapper horizontally */
  display: flex;
  justify-content: center;   /* center contents horizontally */
  align-items: center;       /* center contents vertically */
  user-select: none;
  overflow: hidden;
  width: 100%;               /* make sure wrapper spans full width or set desired width */
/*  max-width: 1200px;  */      
  box-sizing: border-box;
}

.draggable-images-wrapper .img-wrap {
  position: relative;
  cursor: grab;
  flex-shrink: 0;            /* prevent shrinking inside flex container */
  width: 300px;              /* set fixed or responsive width */
  height: 300px;             /* set fixed or responsive height */
  margin: 0 10px;            /* spacing between items */
  overflow: visible;         /* allow trails outside if needed */
}

.draggable-images-wrapper .img-drag,
.draggable-images-wrapper .img-trail {
  position: absolute;
  top: 0;
  left: 0;
  right: auto;               /* remove right:0 to avoid conflicting */
  border-radius: 10px;
  overflow: hidden;
  will-change: transform, filter;
  pointer-events: none;
}

.draggable-images-wrapper .img-drag {
  pointer-events: auto;
  cursor: grab;
  z-index: 10;
  transition: box-shadow 0.3s ease;
}

.draggable-images-wrapper .img-drag:active {
  cursor: grabbing;
}

.draggable-images-wrapper .img-drag img,
.draggable-images-wrapper .img-trail img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  border-radius: 10px;
}