/*
 * Home: «أبرز الإنجازات» (pages/home/works.php) — after the services: what
 * we do → what it achieved. The first story large (picture beside the text
 * on wide screens), the others beside each other.
 */

.gb-home-works {
	padding-block: var(--gb-space-3xl) var(--gb-space-2xl);
	background-color: var(--gb-bg);
	color: var(--gb-text);
}

.gb-home-works__head {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	justify-content: space-between;
	gap: var(--gb-space-s);
	max-inline-size: none;
}

.gb-home-works__head > div {
	display: grid;
	gap: var(--gb-space-2xs);
	max-inline-size: 42rem;
}

.gb-work-cards--home {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

.gb-work-cards--home > li:first-child {
	grid-column: 1 / -1;
}

/* The first story: picture beside the text. */
@media (min-width: 56rem) {
	.gb-work-cards--home .gb-work-card--large {
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
		grid-template-rows: none;
	}

	.gb-work-cards--home .gb-work-card--large .gb-work-card__visual {
		aspect-ratio: auto;
		min-block-size: 22rem;
	}

	.gb-work-cards--home .gb-work-card--large .gb-work-card__body {
		align-content: center;
		padding: var(--gb-space-l);
	}
}