/*
 * Project card. Figma: image 586x415, title Firs Light 30 / -2% 22px below,
 * location Eudoxus Regular 13 / 6% uppercase. Wide variant: image 1296x689.
 */

.project-card__link {
	display: block;
	color: var(--wp--preset--color--black);
}

.project-card__media {
	aspect-ratio: 586 / 415;
	overflow: hidden;
	background: var(--wp--preset--color--grey-light);

	@media (min-width: 768px) {
		.project-card--wide & {
			aspect-ratio: 1296 / 689;
		}
	}
}

.project-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.project-card__title {
	margin-top: 22px;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--heading-s);
	font-weight: 300;
	line-height: var(--wp--custom--line-height--heading);
	letter-spacing: var(--wp--custom--letter-spacing--heading);
}

.project-card__location {
	margin-top: 8px;
	color: var(--wp--preset--color--dark);
	font-size: var(--wp--preset--font-size--label-l);
	font-weight: 400;
	line-height: var(--wp--custom--line-height--heading);
	letter-spacing: var(--wp--custom--letter-spacing--label);
	text-transform: uppercase;
}

/* No hover state in Figma: subtle zoom on the image. */
@media (hover: hover) {
	.project-card__link:hover .project-card__image {
		transform: scale(1.03);
	}
}

@media (prefers-reduced-motion: reduce) {
	.project-card__image {
		transition: none;
	}
}