section.category-cards-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;
	}
}

main.category-cards
{
	display: grid;
	width: 100%;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-gap: 1rem;
	
	a
	{
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-end;
		flex-direction: column;
		position: relative;
		padding: 1rem;
		flex-basis: 354px;
		text-decoration: none !important;
		border-radius: .75rem;
		overflow: hidden;
		aspect-ratio: 3/4;
		
		h3
		{
			color: white;
			position: relative;
			z-index: 3;
		}
		
		div.card-button-wrapper
		{
			visibility: none;
			opacity: 0;
			transform: translateY(2rem);
			transition: all 300ms ease-in-out;
			position: relative;
			z-index: 3;
			height: 0px;
			width: 56px;
			border-radius: 12px;
			border: 2px solid var(--wdc-terracotta);
			padding: 2px;
			
			span
			{
				display: flex;
				justify-content: center;
				align-items: center;
				height: 100%;
				width: 100%;
				background: var(--wdc-terracotta);
				color: white;
				border-radius: 10px;
			}
		}
		
		img
		{
			position: absolute;
			object-fit: cover;
			object-position: center;
			height: 100%;
			width: 100%;
			top: 0px;
			left: 0px;
			right: 0px;
			bottom: 0px;
			z-index: 1;
			transform: scale(1);
			transition: all 250ms ease-in-out;
		}
	}
	
	a:hover
	{
		
		div.card-button-wrapper
		{
			visibility: initial;
			height: 56px;
			transform: translateY(0rem);
			opacity: 1;
		}
		
		img
		{
			transform: scale(1.1);
		}
	}
	
	a:after
	{
		content: '';
		position: absolute;
		height: 100%;
		width: 100%;
		top: 0px;
		left: 0px;
		right: 0px;
		bottom: 0px;
		background-image: linear-gradient(0deg, rgba(0,0,0,.75) 0%, rgba(0,0,0,0) 50%);
		transition: all 250ms ease-in-out;
		z-index: 2;
	}
}

@media ( width < 1200px )
{
	main.category-cards
	{
		grid-template-columns: 1fr 1fr;
	}
}

@media ( width < 900px )
{
	main.category-cards
	{
		grid-template-columns: 1fr;
	}
}