/* Section: Media Cards */

.tra-media-cards {
	--tra-pad-block: 4rem;
}

.tra-media-cards__heading {
	margin-bottom: 2rem;
}

.tra-media-cards__intro {
	margin-bottom: 1.5rem;
}

/* Source: gap-8 = 2rem, mt-12 = 3rem. */
.tra-media-cards__grid {
	--tra-grid-gap: 2rem;
	margin-top: 3rem;
}

.tra-media-cards__item {
	display: block;
	color: inherit;
	text-decoration: none;
}

.tra-media-cards__item--link {
	cursor: pointer;
}

/* Source: aspect-video, rounded-[2.5rem], mb-6 = 1.5rem, bg-brand-muted/20. */
.tra-media-cards__media {
	aspect-ratio: 16 / 9;
	margin-bottom: 1.5rem;
	overflow: hidden;
	border-radius: var(--tra-r-2xl);
	background-color: color-mix(in srgb, var(--tra-muted) 20%, transparent);
}

.tra-media-cards__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--tra-transition);
}

.tra-media-cards__item:hover .tra-media-cards__img {
	transform: scale(1.1);
}

/* Source: text-lg 18/28, font-black, uppercase, mb-2 = 0.5rem. */
.tra-media-cards__title {
	margin: 0 0 0.5rem;
	font-size: 1.125rem;
	line-height: 1.5556;
	font-weight: 900;
	text-transform: uppercase;
	color: var(--tra-ink);
	transition: color var(--tra-transition);
}

.tra-media-cards__item:hover .tra-media-cards__title {
	color: var(--tra-accent);
}

/* Source: text-xs 12/16, text-brand-primary/60. */
.tra-media-cards__text {
	margin: 0;
	font-size: 0.75rem;
	line-height: 1.3333;
	color: var(--tra-ink-faint);
}

@media (prefers-reduced-motion: reduce) {
	.tra-media-cards__item:hover .tra-media-cards__img {
		transform: none;
	}
}