section.archive
{
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	padding-left: clamp(1rem, 10dvw, 900px);
	padding-right: clamp(1rem, 10dvw, 900px);
	
	> h2
	{
		margin-block-start: 0px;
		margin-block-end: 0px;
		margin-bottom: 0px;
		line-height: 1em;
		flex-basis: 100%;
		text-align: center;
	}
	
	> main.archive-flex
	{
		display: flex;
		flex-wrap: wrap;
		gap: 2rem;
		justify-content: space-between;
		flex-basis: 100%;
		
		a.archive-item
		{
			flex-basis: 480px;
			text-decoration: none;
			display: grid;
			grid-template-rows: 3fr 2fr;
			height: 630px;
			transition: all 250ms ease-in-out;
			
			aside.archive-image
			{
				position: relative;
				border-radius: 10px 10px 0 0;
				overflow: hidden;
				
				img
				{
					
					position: absolute;
					height: 100%;
					width: 100%;
					object-fit: cover;
					object-position: center;
					transition: all 125ms ease-in-out;
					transform: scale(1);
				}
			}
			
			main.archive-content
			{
				display: flex;
				flex-wrap: wrap;
				background: white;
				color: var(--verduyn-blue);
				padding: 1rem 1rem 1rem;
				
				*
				{
					margin-block-start: 0px;
					margin-block-end: 0px;
					flex-basis: 100%
				}
				
				h3
				{
					color: var(--verduyn-blue);
					font-size: 1.67rem;
				}
				
				div.button
				{
					flex-basis: fit-content;
					margin-top: auto;
				}
			}
		}
		
		a.archive-item:hover
		{
			transform: translateY(-.5rem);
			
			aside.archive-image
			{
				img
				{
					transform: scale(1.1);
				}
			}
		}
	}
	
	> a.button.secondary
	{
		margin-left: auto;
	}
}