.scrolling-images {
	--min-h: 362px;
	align-items: center;
	background: var(--bkgd-bkgd);
	color: #fff;
	display: flex;
	justify-content: center;
	min-height: var(--min-h, 520px);
	overflow: hidden;
	position: relative;
	transition: background-color .6s ease;
	width: 100%;
}

@media (min-width:600px) {
	.stack-mobile .scrolling-images {
		--min-h: 520px;
		height: calc(100% + var(--sp-section-wrapper-top-bottom) + var(--sp-section-wrapper-top-bottom));
		margin-bottom: calc(var(--sp-section-wrapper-top-bottom) * -1) !important;
		margin-top: calc(var(--sp-section-wrapper-top-bottom) * -1) !important;
	}
}

@media (min-width:1024px) {
	.stack-tablet .scrolling-images {
		--min-h: 520px;
		height: calc(100% + var(--sp-section-wrapper-top-bottom) + var(--sp-section-wrapper-top-bottom));
		margin-bottom: calc(var(--sp-section-wrapper-top-bottom) * -1) !important;
		margin-top: calc(var(--sp-section-wrapper-top-bottom) * -1) !important;
	}
}

.scrolling-images__stage {
	backface-visibility: hidden;
	height: 100%;
	min-height: var(--min-h, 520px);
	perspective: 1200px;
	perspective-origin: 50%;
	position: relative;
	width: 100%;
}

@media (max-width:768px) {
	.scrolling-images__stage {
		height: 100%;
	}
}

.scrolling-images__scroll-container {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	height: 200%;
	justify-content: center;
	left: 50%;
	opacity: .5;
	overflow: visible;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%) rotateX(15deg) rotate(-15deg);
	transform-style: preserve-3d;
	width: 200%;
}

@media (max-width:768px) {
	.scrolling-images__scroll-container {
		height: 200%;
		width: 200%;
	}
}

.scrolling-images__row {
	display: flex;
	gap: 2rem;
	will-change: transform;
}

.scrolling-images__row-1 {
	animation: sepScrollCardsReverse 40s linear infinite;
}

.scrolling-images__row-2 {
	animation: sepScrollCardsReverse 35s linear infinite;
}

.scrolling-images__row-3 {
	animation: sepScrollCardsReverse 45s linear infinite;
}

.scrolling-images__card {
	border-radius: 1rem;
	box-shadow: 0 20px 40px rgba(0, 0, 0, .3), 0 0 0 1px hsla(0, 0%, 100%, .1);
	flex-shrink: 0;
	height: var(--card-height, 400px);
	min-width: 150px;
	overflow: hidden;
	pointer-events: none;
	transform-style: preserve-3d;
}

.scrolling-images__card img {
	display: block !important;
	height: 100% !important;
	-o-object-fit: cover !important;
	object-fit: cover !important;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	width: 100% !important;
}

.scrolling-images__empty {
	align-items: center;
	display: flex;
	height: 100vh;
	justify-content: center;
	width: 100%;
}

.scrolling-images__empty .components-placeholder {
	background: transparent;
	border: 2px dashed hsla(0, 0%, 100%, .3);
}

@keyframes sepScrollCardsReverse {
	0% {
		transform: translate3d(var(--translate-distance-negative), 0, 0);
	}
	
	to {
		transform: translateZ(0);
	}
}

.scrolling-images__stage:after, .scrolling-images__stage:before {
	bottom: 0;
	content: "";
	opacity: .8;
	pointer-events: none;
	position: absolute;
	top: 0;
	transition: opacity .6s ease;
	width: 200px;
	z-index: 2;
}

@media (max-width:768px) {
	.scrolling-images__stage:after, .scrolling-images__stage:before {
		width: 100px;
	}
}

.scrolling-images__stage:before {
	background: none;
	box-shadow: inset 5vw 5vw 5vw 1vw var(--bkgd-bkgd, #000);
	height: var(--min-h, 100%);
	opacity: 1;
	width: 100%;
}

.scrolling-images__stage:after {
	background: none;
	box-shadow: inset -5vw -5vw 5vw 1vw var(--bkgd-bkgd, #000);
	height: var(--min-h, 100%);
	opacity: 1;
	width: 100%;
}

.editor-styles-wrapper .scrolling-images {
	flex-direction: column;
	min-height: 600px;
}

.editor-styles-wrapper .scrolling-images__stage {
	height: 600px;
}

.editor-styles-wrapper .scrolling-images__row {
	animation: none;
}

.editor-styles-wrapper .scrolling-images__rows-editor {
	background: hsla(0, 0%, 100%, .05);
	border-radius: 1rem;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 2rem;
	min-height: 400px;
	padding: 2rem;
	width: 100%;
}

.editor-styles-wrapper .scrolling-images__rows-editor>.wp-block-group {
	background: hsla(0, 0%, 100%, .03);
	border: 2px dashed hsla(0, 0%, 100%, .2);
	border-radius: .5rem;
	display: flex;
	flex-wrap: nowrap;
	gap: 1rem;
	min-height: 280px;
	overflow-x: auto;
	overflow-y: hidden;
	padding: 3rem 1rem 1rem;
	position: relative;
	scroll-behavior: smooth;
	transition: all .2s ease;
}

.editor-styles-wrapper .scrolling-images__rows-editor>.wp-block-group::-webkit-scrollbar {
	height: 8px;
}

.editor-styles-wrapper .scrolling-images__rows-editor>.wp-block-group::-webkit-scrollbar-track {
	background: hsla(0, 0%, 100%, .05);
	border-radius: 4px;
}

.editor-styles-wrapper .scrolling-images__rows-editor>.wp-block-group::-webkit-scrollbar-thumb {
	background: rgba(168, 181, 255, .3);
	border-radius: 4px;
}

.editor-styles-wrapper .scrolling-images__rows-editor>.wp-block-group::-webkit-scrollbar-thumb:hover {
	background: rgba(168, 181, 255, .5);
}

.editor-styles-wrapper .scrolling-images__rows-editor>.wp-block-group:before {
	background: rgba(168, 181, 255, .2);
	border-radius: 4px;
	color: #a8b5ff;
	content: attr(data-title);
	font-size: 11px;
	font-weight: 600;
	left: 12px;
	letter-spacing: .5px;
	padding: 4px 12px;
	position: absolute;
	text-transform: uppercase;
	top: 12px;
	z-index: 1;
}

.editor-styles-wrapper .scrolling-images__rows-editor>.wp-block-group.is-selected {
	background: rgba(168, 181, 255, .05);
	border-color: #a8b5ff;
}

.editor-styles-wrapper .scrolling-images__rows-editor>.wp-block-group:not(:has(.wp-block-image)):after {
	color: hsla(0, 0%, 100%, .4);
	content: "Click + button to add images →";
	font-size: 13px;
	left: 50%;
	pointer-events: none;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	white-space: nowrap;
}

.editor-styles-wrapper .scrolling-images__rows-editor>.wp-block-group .wp-block-image {
	flex-shrink: 0;
	margin: 0;
}

.editor-styles-wrapper .scrolling-images__rows-editor>.wp-block-group .wp-block-image img {
	border-radius: .5rem;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
	height: 200px;
	-o-object-fit: cover;
	object-fit: cover;
	width: auto;
}

.editor-styles-wrapper .scrolling-images__rows-editor>.wp-block-group .block-list-appender {
	position: relative;
}

.editor-styles-wrapper .scrolling-images__rows-editor>.wp-block-group .block-editor-button-block-appender {
	background: rgba(168, 181, 255, .05);
	border: 2px dashed rgba(168, 181, 255, .3);
	border-radius: .5rem;
	flex-shrink: 0;
	height: 200px;
	position: relative;
	transition: all .2s ease;
	width: 150px;
}

.editor-styles-wrapper .scrolling-images__rows-editor>.wp-block-group .block-editor-button-block-appender:hover {
	background: rgba(168, 181, 255, .1);
	border-color: #a8b5ff;
}

.editor-styles-wrapper .scrolling-images__rows-editor>.wp-block-group .block-editor-button-block-appender svg {
	fill: #a8b5ff;
}

.editor-styles-wrapper .scrolling-images__rows-editor>.wp-block-group:first-child:before {
	content: "Row 1";
}

.editor-styles-wrapper .scrolling-images__rows-editor>.wp-block-group:nth-child(2):before {
	content: "Row 2";
}

.editor-styles-wrapper .scrolling-images__rows-editor>.wp-block-group:nth-child(3):before {
	content: "Row 3";
}