/* Figma 133:125 — Where we focus
 * Title: Publico Semibold 48/48, “we focus” #9197B7, centered
 * Rows: 1016 @ (100,113), gap 56 · row 338 · items-end · space-between
 * Card: 412 · title 24/32 Bold · desc Inter 16/24 #636364, border-l, pad 10/16
 * Illu: 585×338
 * Section: 1116×1207
 */

.qnd-focus {
	width: 100%;
	max-width: 100%;
	height: 1207px;
	position: relative;
	overflow: hidden;
}

.qnd-focus__title {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	justify-content: center;
	padding: var(--qnd-space-1) var(--qnd-space-3);
	gap: var(--qnd-space-4);
	box-sizing: border-box;
}

.qnd-focus__rows {
	position: absolute;
	left: 100px;
	top: 113px;
	width: 1016px;
	max-width: calc(100% - 100px);
	height: 1094px;
	display: flex;
	flex-direction: column;
	gap: var(--qnd-space-13);
}

.qnd-focus__row {
	height: 338px;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-shrink: 0;
}

.qnd-focus__row--reverse {
	flex-direction: row-reverse;
}

.qnd-focus__card {
	width: 412px;
	max-width: 100%;
	display: flex;
	flex-direction: column;
	gap: 11px;
	flex-shrink: 0;
}

@media (max-width: 1100px) {
	.qnd-focus {
		height: auto;
		overflow: visible;
		padding-bottom: 32px;
	}

	.qnd-focus__title,
	.qnd-focus__rows {
		position: relative;
		left: auto;
		top: auto;
		width: 100%;
		height: auto;
		max-width: 100%;
	}

	.qnd-focus__rows {
		margin-top: var(--qnd-space-8);
		gap: var(--qnd-space-13);
	}

	.qnd-focus__row,
	.qnd-focus__row--reverse {
		height: auto;
		flex-direction: column;
		align-items: stretch;
		gap: var(--qnd-space-6);
	}

	.qnd-focus__card,
	.qnd-focus-illustration {
		width: 100%;
	}

	.qnd-focus-illustration {
		height: auto;
		aspect-ratio: 585 / 338;
	}
}

@media (min-width: 769px) and (max-width: 1100px) {
	.qnd-focus__title {
		justify-content: flex-start;
	}
}

@media (max-width: 768px) {
	.qnd-focus__rows {
		margin-top: var(--qnd-space-6);
		gap: var(--qnd-space-8);
	}

	.qnd-focus__row,
	.qnd-focus__row--reverse {
		gap: var(--qnd-space-4);
	}

	.qnd-focus__card {
		gap: 8px;
	}
}