/*
 * GameRStar News — Below-hero "Coming Next" row
 * Card visuals live in gsn-card.css; this file only lays out the 40/60 row
 * of one large card + three small cards. Relies on the brand color
 * variables declared on .gsn-front-page in gsn-hero.css.
 */

.gsn-below {
	padding: clamp( 12px, 2vw, 24px ) clamp( 20px, 6vw, 80px ) clamp( 40px, 6vw, 88px );
	max-width: 1280px;
	margin: 0 auto;
}

.gsn-below__grid {
	display: grid;
	grid-template-columns: 2fr 3fr;
	/* `start` (not `stretch`): the small-card column should size to its own
	 * content instead of being force-stretched to match the tall large card,
	 * which left a large empty gap under each small card's excerpt. */
	align-items: start;
	gap: var( --grid-gap );
}

.gsn-below__small-grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	align-items: stretch;
	gap: var( --grid-gap );
}

@media ( max-width: 900px ) {
	.gsn-below__grid {
		grid-template-columns: 1fr;
	}
}

@media ( max-width: 640px ) {
	.gsn-below__small-grid {
		grid-template-columns: 1fr;
	}
}