.project {
	flex-direction: column;
	gap: 45px;
	margin-bottom: 25dvh;
}

.project .banner {
	aspect-ratio: 10 / 3;
	border-radius: 15px;
	overflow: hidden;
	display: flex;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

.project .banner img {
	width: 100%;
	object-fit: cover;
}

.project h2 {
	font-size: 3rem;
}

.project h3 {
	font-size: 2rem;
}

.project .tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.project .tag {
	background-color: var(--surfaceInverted);
	color: var(--contentInverted);
	font-size: 0.875rem;
	border-radius: 30px;
	padding: 10px 20px;
}

.project .img-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 1rem;
}

.project .img-grid img {
	object-fit: cover;
	width: 100%;
	border-radius: 15px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

.project .links {
	display: flex;
	flex-direction: column;
	gap: 22.5px;
}

.project .links-row {
	display: flex;
	gap: 10px;
}

.project .links-row a {
	color: var(--contentPrimary);
	text-decoration: none;
	font-size: 1rem;
	border: 1.5px solid var(--contentPrimary);
	border-radius: 999px;
	padding: 6px 18px;
	background: transparent;
	transition: color 300ms, border-color 300ms, background 300ms;
	pointer-events: auto;
}

.project .links-row a:hover {
	border: none;
	padding: 7.5px 19.5px;
	color: #fff;
	background-size: 200% 200%;
	animation: linkGradient 2s ease infinite;
}

.project .links-row a[href*="instagram"]:hover {
	background-image: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}

.project .links-row a[href*="github"]:hover {
	background-image: linear-gradient(135deg, #24292e, #6e40c9, #24292e);
}

.project .links-row a:not([href*="instagram"]):not([href*="github"]):hover {
	background-image: linear-gradient(135deg, #1a1a1a, #292929, #1a1a1a);
}

@keyframes linkGradient {
	0%   { background-position: 0% 50%; }
	50%  { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}