/**
 * Drag Gallery - add class "drag-gallery" to an Elementor container with image widgets inside.
 * Height follows the design: 640px at 1920px viewport.
 */
.drag-gallery {
	--dg-height: clamp(280px, 33.34vw, 640px);
	--dg-bleed: 0px;
}

.elementor .drag-gallery.e-con,
.drag-gallery.e-con {
	flex-shrink: 0 !important;
	width: calc(100% + var(--dg-bleed)) !important;
	max-width: none !important;
	padding: 0 !important;
}

.drag-gallery:has(> .e-con-inner) {
	overflow: hidden;
}

.drag-gallery,
.drag-gallery > .e-con-inner {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: stretch !important;
	justify-content: flex-start !important;
	gap: 0 !important;
}

/* Scroll element (the container itself, or its inner wrapper when boxed) */
.drag-gallery:not(:has(> .e-con-inner)),
.drag-gallery > .e-con-inner {
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scroll-behavior: auto !important;
	scroll-snap-type: none;
	scrollbar-width: none;
	cursor: grab;
	-webkit-overflow-scrolling: touch;
}

.drag-gallery:not(:has(> .e-con-inner))::-webkit-scrollbar,
.drag-gallery > .e-con-inner::-webkit-scrollbar {
	display: none;
}

.drag-gallery.is-dragging,
.drag-gallery.is-dragging * {
	cursor: grabbing !important;
	user-select: none;
}

.drag-gallery .elementor-widget {
	flex: 0 0 auto !important;
	width: auto !important;
	max-width: none !important;
	height: var(--dg-height);
	margin: 0 !important;
}

.drag-gallery .elementor-widget-container,
.drag-gallery .elementor-widget-image a {
	display: block;
	height: 100%;
}

.drag-gallery .elementor-widget img {
	display: block;
	width: auto !important;
	max-width: none !important;
	height: 100% !important;
	object-fit: cover;
	border-radius: 0;
	user-select: none;
	-webkit-user-drag: none;
}