@media (min-width: 1025px) {
	#projects { display: flex; flex-direction: column; gap: 4rem; width: 100%; margin: auto }
	#projects .project { display: flex; align-items: center; justify-content: space-between; width: 100%; position: relative; margin: -4rem 0 }
	#projects .project:first-child { margin-top: 0px }
	#projects .project:first-child .details { margin-bottom: 80px }
	#projects .project:last-child .details { margin-top: 80px }
	#projects .project:last-child { margin-bottom:0px }
	#projects .project a.cover { width: 48%; display: block }
	#projects .project img { width: 100%; height: auto; display: block }
	#projects .project .details { width: 48%; font-size: 1rem; line-height: 1.4; color: #222 }
	#projects .project:nth-child(odd) .details span.left { margin-right:5px }
	#projects .project:nth-child(even) .details span.right { margin-left:5px }
	#projects .project:nth-child(odd) .details span.right,
	#projects .project:nth-child(even) .details span.left { display:none }
	#projects .project:nth-child(even) { flex-direction: row-reverse; text-align: right }
	#projects h3 { font-size:1.5rem; margin-top: 0px !important }
}

@media (max-width: 1024px) {
	#projects { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); padding: 20px; }
	.project { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom:20px }
	.project img { width: 100%; height: auto; }
	.project p { margin-top: 10px; font-size: 0.95rem; }
}

@media (min-width: 768px) and (max-width: 1024px) {
	#projects { grid-template-columns: repeat(2, 1fr); gap: 20px; }
	.project p { margin-top: 8px; }
}

@media (max-width: 767px) {
	#projects { grid-template-columns: 1fr; }
}

#projects h3 a { text-decoration:none }

.project-title { font-size:2rem; line-height:2rem }