section.cards
{
	display: block;
	position: relative;
	padding-left: 0px;
	padding-right: clamp(1rem, 10dvw, 900px);
	
	.swiper-slide
	{
		a
		{
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			align-items: flex-start;
			color: white;
			text-decoration: none;
			gap: 1.5rem;
			padding: 2rem;
			position: relative;
			border-radius: 10px;
			height: clamp(200px, 38dvh, 410px);
			overflow: hidden;
			transform: translateY(0px);
			transition: all 250ms ease-in-out;
			
			img
			{
				top: 0px;
				left: 0px;
				right: 0px;
				bottom: 0px;
				height: 100%;
				width: 100%;
				position: absolute;
				object-fit: cover;
				object-position: center;
				transform: scale(1);
				filter: grayscale(0);
				transition: all 250ms ease-in-out;
				z-index: 1;
			}
			
			h3
			{
				position: relative;
				z-index: 2;
				color: white;
				font-size: 1.67rem;
			}
			
			div.button
			{
				position: relative;
				z-index: 2;
				background: white;
				color: var(--verduyn-blue);
			}
		}
		
		a:hover
		{		
			img
			{
				transform: scale(1.1);
				filter: grayscale(.5);
			}
		}
	}
	
	.swiper-buttons
	{
		display: grid;
		grid-template-columns: 1fr 1fr;
		
		div
		{
			display: flex;
			justify-content: center;
			align-items: center;
			color: var(--verduyn-blue);
			cursor: pointer;
			padding: .5rem .75rem;
			background: rgba(255,255,255,.67);
			transition: all 250ms ease-in-out;
		}
		
		div:hover
		{
			background: rgba(255,255,255,1);
		}
		
		div.previous
		{
			padding-left: 1.5rem;
			clip-path: polygon(0 0, 100% 0, 100% 100%, 25% 100%);
		}
		
		div.next
		{
			padding-right: 1.5rem;
			clip-path: polygon(0 0, 75% 0, 100% 100%, 0% 100%);
		}
	}
}