.product-media-container {
	--swiper-navigation-size: 20px;
	--swiper-border-radius: 4px;
	--swiper-thumb-border-radius: 2px;
	--swiper-pagination-bullet-size: 10px;
	--swiper-pagination-color: #353d4c;
	--swiper-thumbnail-border-color: #dfba7c;
	--swiper-banner-background-color: #dfba7c;

	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-bottom: 16px;

	.swiper-slide {
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;
	}

	.swiper-button-prev,
	.swiper-button-next {
		display: flex;
		position: absolute;

		&:after {
			display: none;
		}

		.svg-wrapper,
		& svg {
			width: 32px;
			height: auto;
		}
	}

	.swiper-button-prev {
		left: 20px;
	}

	.swiper-button-next {
		right: 20px;

		svg {
			transform: rotate(180deg);
		}
	}

	.swiper-pagination {
		position: static;
	}

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

	.product-media-gallery {
		position: relative;
		width: 75%;
		display: flex;
		align-items: flex-start;
		justify-content: center;

		.swiper-slide {
			container-type: inline-size;

			& > * {
				border-radius: var(--swiper-border-radius);
			}
		}

		.product-media-gallery__banner {
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			bottom: 3%;
			right: 3%;
			min-width: 45%;
			min-height: 7%;
			background-color: var(--swiper-banner-background-color);
			border-radius: 0;
			padding: 1.5% 2%;
		}

		.banner-text {
			font-size: 2.25cqw;
			line-height: 1;
			font-weight: 600;
		}
	}

	.product-media-gallery-thumbs {
		.swiper-slide {
			padding: 4px;
			border-radius: var(--swiper-thumb-border-radius);
			border: 1px solid transparent;
			cursor: pointer;

			img {
				aspect-ratio: 1;
				border-radius: var(--swiper-thumb-border-radius);
			}
		}

		.swiper-slide-thumb-active {
			border: 1px solid var(--swiper-thumbnail-border-color);
		}
	}
}

@media (min-width: 600px) {
	.product-media-container {
		--swiper-border-radius: 8px;
		--swiper-thumb-border-radius: 4px;

		.swiper-button-prev,
		.swiper-button-next {
			.svg-wrapper,
			& svg {
				width: 48px;
			}
		}

		.swiper-button-prev {
			left: 40px;
		}

		.swiper-button-next {
			right: 40px;
		}
	}
}