.custom-carousel {
    position: relative;
}

.main-image-wrapper,
.gallery-slider {
    position: relative;
    width: 100%;
    margin: 0 auto;
	padding: 0 3rem;
}

.main-image {
	--_aspect-ratio: 1.36;
	
	aspect-ratio: var(--_aspect-ratio);
	max-width: 100%;
	overflow: hidden;
}

.main-image-slider {
	display: flex;
	max-height: calc(100vh - (var(--header-height) * 2) - 2rem);
	white-space: nowrap;
	transform: translateX( calc(-100% * var(--_currentIndex, 0)) );
	transition: transform 300ms ease;
}

.carousel-image {
	aspect-ratio: var(--_aspect-ratio);
	min-width: 100%;
    height: auto;
	object-fit: contain;
	
	img {
		max-height: 100%;
		object-fit: contain;
	}
}

.project-data {
  margin: 1rem 0 3rem;
  padding: 0 3rem;
  text-align: left;
}

.custom-carousel h1 {
	margin: 0.75em 0 0.5em;
	font-family: var(--e-global-typography-accent-font-family);
	font-size: 1.3rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.custom-carousel dl {
    font-size: 0.875rem;
	line-height: 1.3;
}

.custom-carousel dt {
	display: inline;
}

.custom-carousel dd {
	display: inline;
	margin-left: 0.5em;
}

.custom-carousel dd::after {
	content: '\A';
	white-space:pre;
}

.thumbnail-gallery,
.gallery-thumbnails {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 20px;
	padding: 0 3rem;
}

.elementor img.carousel-thumbnail,
.elementor video.carousel-thumbnail {
    width: 100%;
	aspect-ratio: 1.778;
    border: 3px solid transparent;
	object-fit: cover;
	cursor: pointer;
}

.carousel-arrow,
.carousel-arrow:hover,
.carousel-arrow:focus {
	display: flex;
	justify-content: center;
	align-items: center;
    position: absolute;
    top: 50%;
	width: 3rem;
    color: transparent;
	border: none;
	background: none;
    transform: translateY(-50%);
    cursor: pointer;
}

.left-arrow {
    left: 0;
}

.right-arrow {
    right: 0;
}

.left-arrow::after,
.right-arrow::after {
  display: block;
  position: absolute;
  left: 8px;
  content: '';
  width: 2.5rem;
  aspect-ratio: 1;
  border: 2px solid var(--e-global-color-primary);
  border-right: none;
  border-top: none;
  transform: rotate(45deg);
}

.right-arrow::after {
  left: auto;
  right: 8px;
  transform: rotate(-135deg);
}

.project-description p {
	margin: 1em 0 0;
	font-size: 0.875rem;
}

.swiper-zoom-container video {
	max-width: 100%;
	max-height: 100%;
}

.swiper-zoom-container:has(video) .swiper-lazy-preloader {
	display: none;
}

@media (max-width:768px) {
	.main-image-wrapper,
	.gallery-slider {
		padding: 0 2rem;
	}

	.left-arrow::after,
	.right-arrow::after {
		left: 12px;
		content: '';
		width: 1.5rem;
	}

	.right-arrow::after {
		left: auto;
		right: 12px;
	}

	.project-data {
		margin-bottom: 2rem;
		padding: 0 2rem;
	}

	.thumbnail-gallery,
	.gallery-thumbnails {
		padding: 0 2rem;
		grid-template-columns: repeat(2, 1fr);
	}
}