section.product-slider-wrapper
{
	width: 100%;
	padding: clamp(2rem, 10dvh, 108px) clamp(1rem, 10dvw, 192px);
	
	> h2
	{
		margin: 0 auto;
		text-align: center;
		color: var(--wdc-terracotta);
		font-size: clamp(1rem, calc(1rem + .56dvh), 24px);
		margin-bottom: 2rem;
	}
	
	a
	{
		display: grid;
		grid-template-rows: 2fr 1fr;
		grid-gap: .75rem;
		color: var(--wdc-black);
		text-decoration: none;
		
		div.image-wrapper
		{
			display: block;
			position: relative;
			width: 100%;
			aspect-ratio: 1/1;
			border-radius: 15px;
			overflow: hidden;
			
			img
			{
				position: absolute;
				object-fit: cover;
				object-position: center;
				width: 100%;
				height: 100%;
				transform: scale(1);
				transition: all 250ms ease-in-out;
			}
		}
		
		article
		{
			display: flex;
			flex-wrap: wrap;
			align-content: flex-start;
			gap: 1rem;
			> *
			{
				flex-basis: 100%;
			}
			
			h5
			{
				font-size: 1rem;
				color: var(--wdc-pink);
				font-weight: 300;
			}

			h2
			{
				font-size: clamp(1rem, calc(1rem + .37dvh), 20px);
				line-height: 1em;
			}

			h4.price
			{
				color: var(--wdc-terracotta);
			}
		}
	}
	
	a:hover
	{
		div.image-wrapper
		{			
			img
			{
				transform: scale(1.1);
			}
		}	
	}
	
	.swiper-button-prev,
	.swiper-button-next
	{
		display: flex;
		position: absolute;
		top: calc(anchor(top) + 17.5rem);
		justify-content: center;
		color: white;
		align-items: center;
		height: 3rem;
		width: 3rem;
		border-radius: .75rem;
		transition: all 250ms ease-in-out;
		background: var(--wdc-terracotta);
		text-rendering: auto;
	}
	
	.swiper-button-prev
	{
		opacity: .34;
		left: calc(anchor(left) - 5rem);
	}
	
	.swiper-button-next
	{
		opacity: .67;
		right: calc(anchor(right) - 5rem);
	}
	
	.swiper-button-prev:hover,
	.swiper-button-next:hover
	{
		opacity: 1;
	}
	
	.swiper-button-prev:after,
	.swiper-button-next:after
	{
		content: none;
	}
}

@media ( width < 900px )
{
	section.product-slider-wrapper
	{
		.swiper-button-prev,
		.swiper-button-next
		{
			top: calc(anchor(bottom) + 1.5rem);
		}
	
		.swiper-button-prev
		{
			left: calc(50% - 5rem);
		}
		
		.swiper-button-next
		{
			right: unset;
			left: calc(50% + 2rem);
		}
	}
}