/* Projects list, see layouts/projects/section.html */
:root {
	--projects-width: 60rem;
	--projects-gutter: 1rem;
	--projects-gap: 4rem;
	--project-gap: 2rem;
	--project-media-width: 20rem;
	--project-title-size: 1.2rem;
	--project-meta-size: 0.8rem;
	--project-meta-opacity: 0.7;
	--project-hover-color: var(--color-active);
	--project-transition: 200ms ease-in-out;
}

diana-projects {
	display: flex;
	flex-direction: column;
	gap: var(--projects-gap);
	max-width: var(--projects-width);
	margin: 0 auto;
	padding: 0 var(--projects-gutter);
}

diana-projects a {
	display: flex;
	flex-direction: column;
	gap: var(--project-gap);
	color: inherit;
	text-decoration: none;
}
@media screen and (min-width: 40rem) {
	diana-projects a {
		flex-direction: row;
		align-items: center;
	}
	diana-projects figure {
		flex: 0 0 var(--project-media-width);
	}
}

diana-projects img {
	width: 100%;
}

diana-projects h2 {
	margin: 0;
	font-size: var(--project-title-size);
	font-weight: normal;
	transition: color var(--project-transition);
}
diana-projects a:hover h2,
diana-projects a:focus-visible h2 {
	color: var(--project-hover-color);
}

diana-projects time,
diana-projects p {
	font-size: var(--project-meta-size);
	opacity: var(--project-meta-opacity);
}