section.references
{
	article
	{
		margin: 0 auto 60px auto;
		max-width: 760px;
		text-align: center;
	}
	
	div.reference-wrapper
	{
		max-width: 1360px;
		border-left: 1px solid var(--website-gold);
		border-top: 1px solid var(--website-gold);
		
		a
		{
			display: flex;
			align-items: center;
			overflow: hidden;
			justify-content: center;
			position: relative;
			border-right: 1px solid var(--website-gold);
			border-bottom: 1px solid var(--website-gold);
			aspect-ratio: 4/3;
			color: var(--website-black);
			text-decoration: none;
			transition: all 200ms ease-in-out;
			transition-delay: 100ms;
			
			span.year
			{
				display: inline-flex;
				font-family: 'ReadexPro';
				font-weight: 400;
				text-transform: uppercase;
				letter-spacing: 3px;
				font-size: .9rem;
				align-items: center;
				justify-content: center;
				padding: .25rem .75rem;
				border-radius: 1rem;
				border: 1px solid var(--website-black);
				position: absolute;
				bottom: 1rem;
				right: 1rem;
				transition: all 200ms ease-in-out;
				transition-delay: 100ms;
			}
		}
		
		a:after
		{
			content: '';
			position: absolute;
			top: 0px;
			left: 0px;
			height: 100%;
			width: 100%;
			background: var(--website-gold);
			z-index: -1;
			transform: translateY(100%);
			transition: transform 200ms ease-in-out;
		}
		
		a:hover
		{
			color: white;
			
			span.year
			{
				border-color: white;
			}
		}
		
		a:hover:after
		{
			transform: translateY(0px);
		}
	}
	.swiper-buttons
	{
		display: flex;
		gap: .5rem;
		
		> div
		{
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 50%;
			height: 2rem;
			width: 2rem;
			color: var(--website-gold);
			cursor: pointer;
		}
		
		> div:last-child
		{
			border: 1px solid var(--website-gold);
		}
		
		> div:hover
		{
			color: white;
			background: var(--website-gold);
		}
	}
}

@media (width < 900px)
{
	section.references
	{
		padding: 0 2rem;
	}
}