[data-swiper-button-prev]
{
	position: absolute !important;
	top: calc(720 / 555 * 28%) !important;
	left: -15% !important;
	z-index: 1;

	&:disabled {

	}
}


[data-swiper-button-next]
{
	position: absolute !important;
	top: calc(720 / 555 * 28%) !important;
	right: -15% !important;
	z-index: 1;

	&:disabled {

	}
}

.swiper-dynamic-height
{
	/* Removed red background for better visibility */
	background: transparent;
	--swiper-pagination-color: rgba(0, 0, 0, 1);
	--swiper-pagination-bullet-inactive-color: rgba(0, 0, 0, 0.2);

	--swiper-pagination-bottom: 20px;

	position: relative;
	display: flex;
	flex-direction: column;
	justify-self: center;

	width: 100%;
	padding-bottom: 80px; /* Added padding for pagination */
	overflow: hidden;


	.swiper {
		user-select: none;
		box-sizing: border-box;
		overflow: visible;
		width: 100%;

		/* Remove fixed aspect ratio from swiper container */
		height: auto;

		padding: 0px 0px;
		padding-bottom: 20px;
		position: relative; /* Ensure pagination is positioned relative to this */
	}

	.swiper-slide {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		/* Let slide height be determined by content */
		height: auto;
		position: relative;
		box-sizing: border-box;

		overflow: hidden;
	}

	.lazy-media-image-label
	{
		margin-top: 0;
		padding-top: 0;
	}

	.swiper-slide figure {
		width: 100%;
		margin: 0;
		position: relative;
		overflow: hidden;

		/* Use padding-bottom technique for all browsers (Safari-compatible) */
		height: 0;
		padding-bottom: 56.25%; /* 16:9 aspect ratio = 9/16 * 100% = 56.25% */
	}

	.swiper-nav
	{
		margin-top: 20px;
		display: flex;
		justify-content: center;
	}

	.swiper-slide-image {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		max-width: 100%;
		max-height: 100%;
		width: auto;
		height: auto;
		object-fit: contain !important;
		object-position: center !important;
		display: block !important;
	}

	.swiper-outer-wrapper {
		position: relative;
	}

	.swiper-outer {
		position: relative;
	}

	.swiper-slide-outer {
		position: absolute;
		width: 100%;
		top: 0;
		left: 0;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		--transition-delay: 0s;
		--transition-delay-add: 0s;
		--transition-duration: 1s;
		--transition-fade: opacity var(--transition-duration) var(--ease-out-expo) calc(var(--transition-delay) + var(--transition-delay-add)), visibility var(--transition-duration) var(--ease-out-expo) calc(var(--transition-delay) + var(--transition-delay-add)) allow-discrete;
		transition: var(--transition-fade);
	}

	.swiper-slide-outer.active {
		position: relative;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	.swiper-slide-content {
		width: 100%;
		/* Allow content height to be determined by its children */
		height: auto;
		display: flex;
		position: relative;
		z-index: 1;
		box-sizing: border-box;
		transform: translate3d(0, 0, 0);
	}

	.swiper-slide-content-outer
	{
		display: none;
	}

	.swiper-slide-active
	{
		.swiper-slide-content-outer
		{
			display: block;
			position: absolute;

			padding-top: 100%;
		}
	}

	.swiper-slide-prev, .swiper-slide-next
	{
		.swiper-slide-content
		{
			*
			{
				opacity: 0;
			}
		}
	}

	.swiper-outer-wrapper
	{
		position: relative;
	}


	/* Pagination styling */
	.swiper-pagination {
		position: absolute;
		bottom: 0px !important;
		left: 0;
		right: 0;
		z-index: 10;
		display: flex;
		justify-content: center;
		pointer-events: auto;
		padding: 10px 0;
		width: auto !important;
	}

	.swiper-pagination-bullet {
		margin: 0 5px;
		cursor: pointer;
		background-color: #000;
	}

	.swiper-pagination-bullet-active {
		transform: scale(1.2);
		background-color: #000;
	}

	.swiper-outer
	{
		position: relative;

		.swiper-slide-outer
		{
			position: absolute;
			top: 0;

			opacity: 0;
			visibility: hidden;
			pointer-events: none;
			--transition-delay:0s;
			--transition-delay-add:0s;
			--transition-duration:1s;
			--transition-fade: opacity var(--transition-duration) var(--ease-out-expo) calc(var(--transition-delay) + var(--transition-delay-add)), visibility var(--transition-duration) var(--ease-out-expo) calc(var(--transition-delay) + var(--transition-delay-add)) allow-discrete;
			transition: var(--transition-fade);


			&.active
			{
				position: absolute;
				opacity: 1;
				visibility: visible;
				pointer-events: auto;
			}

			@starting-style
			{
				&.show {
					opacity: 0;
					visibility: hidden;
				}
			}
		}
	}


}