/* Studije slučaja. Vrednosti iz design/Pocetna.dc.html. */

.tg-cases {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	gap: 2px;
	background: var(--tg-rule);
	border: 2px solid var(--tg-rule);
}

.tg-case {
	display: flex;
	flex-direction: column;
	background: var(--tg-bg);
	color: var(--tg-ink);
	text-decoration: none;
}

.tg-case:hover {
	background: var(--tg-tint);
	color: var(--tg-ink);
}

/* Slike studija su snimci Search Console grafikona, ne fotografije: crno-belo
   im ubija obojene krive, pa ostaju u boji. Format je 16:9, kao original. */
.tg-case__media {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-bottom: 2px solid var(--tg-rule);
	background: var(--tg-surface);
}

.tg-case__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: none;
}

.tg-case__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 24px;
}

.tg-case__kicker {
	color: var(--tg-mute2);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.tg-case__client {
	font-size: 24px;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.tg-case__row {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-top: 8px;
}

.tg-case__num {
	color: var(--tg-orange);
	font-size: 52px;
	font-weight: 900;
	letter-spacing: -0.04em;
	line-height: 1;
}

.tg-case__metric {
	font-size: 14px;
	font-weight: 600;
}

.tg-case__more {
	margin-top: 10px;
	font-size: 14.5px;
	font-weight: 800;
}