/*
 * Guarantee. Figma 2814:89768 desktop: 1440x410, two 720 halves (primary | bg purple),
 * content from the 1220 column edge (110) / 110 into the right half, 84 top padding;
 * title header/XL (285/312 wide) with the 151x112 illustration on the right of a
 * ~490 row, 24 gap, subtitle 600 24/31, 12 gap, text subtitle/L 480 wide
 * (border light on purple, grey on light).
 * Mobile 2819:92578: halves stacked, padding 84/20, illustration first, 24 gap,
 * header/L + subtitle/XXL, 16 gap, text.
 */

/*
 * Four tracks: outer margins + the two halves of the 1220 column. Each coloured half
 * runs to the window edge (full-bleed background), its content stays in the column:
 * left half from the column edge, right half 110 into its half (Figma).
 */
.guarantee__list {
	display: grid;
	grid-template-columns: minmax(var(--gutter), 1fr) minmax(0, calc(var(--container) / 2)) minmax(0, calc(var(--container) / 2)) minmax(var(--gutter), 1fr);
}

.guarantee__panel {
	display: grid;
	grid-template-columns: subgrid;
	align-items: start;
	min-height: 410px;
	padding-block: 84px;
}

.guarantee__panel--1 { grid-column: 1 / 3; background: var(--c-primary); color: var(--c-text-white); }
.guarantee__panel--1 .guarantee__content { grid-column: 2; padding-right: 24px; }
.guarantee__panel--2 { grid-column: 3 / 5; background: var(--c-bg-purple); color: var(--c-text-dark); }
.guarantee__panel--2 .guarantee__content {
	--inset: clamp(24px, 9vw, 110px);
	grid-column: 1;
	max-width: calc(500px + var(--inset));  /* the inset sits outside the ~500 content row */
	padding-left: var(--inset);
}

.guarantee__content {
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 100%;
	max-width: 500px;
}

.guarantee__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
}

/* Figma box 312: "More than one / application?" on 2 lines. 320 leaves headroom for font metrics (same breaks). */
.guarantee__title { flex: 0 1 320px; max-width: 320px; font: var(--f-header-xl); }
.guarantee__image { flex: none; width: 151px; height: 112px; object-fit: contain; }

.guarantee__text { display: flex; flex-direction: column; gap: 12px; max-width: 480px; }
.guarantee__subtitle { font: 600 24px/31px var(--font); }      /* subtitle/3XL, no token */
.guarantee__desc { font: var(--f-subtitle-l); color: var(--c-border-light); }
.guarantee__panel--2 .guarantee__desc { color: var(--c-text-grey); }

@media (max-width: 1100px) {
	.guarantee__top { flex-direction: column-reverse; }
}

@media (max-width: 767px) {
	.guarantee__list { grid-template-columns: 1fr; }

	.guarantee__panel,
	.guarantee__panel--1,
	.guarantee__panel--2 { grid-column: 1; display: block; min-height: 0; padding: 84px var(--gutter); }
	.guarantee__panel .guarantee__content { padding: 0; }

	.guarantee__content { max-width: none; gap: 8px; }
	.guarantee__top { flex-direction: column-reverse; gap: 24px; }
	.guarantee__title { flex: none; max-width: none; font: var(--f-header-l); }
	.guarantee__text { gap: 16px; max-width: none; }
	.guarantee__subtitle { font: var(--f-subtitle-xxl); }
}