/* Geen position:relative hier: de illustratie hieronder is absoluut en moet zich
   op de sectie richten, niet op deze kop. Met relative werd de kop het
   referentiepunt en landde de illustratie boven op de titel. */
.sq-usp-grid__heading {
  	margin-bottom: 2.4rem;
}

.sq-usp-grid__title {
  	color: var(--text-color--accent);
	/* Bootstrap geeft h2 een margin-bottom van 1rem (= 10px hier); het origineel
	   heeft geen marge op de titel. */
	margin: 0;
}

.sq-usp-grid__illustration {
	position: relative;
	width: auto;
	height: auto;
	max-width: 230px;
	margin: 0 auto;
}

.sq-usp-grid__illustration-image {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.sq-usp-grid__list {
	list-style: none;
	-ms-overflow-style: none;
	scrollbar-width: none;
	display: flex;
	flex-flow: row nowrap;
	flex: 1 1;
	overflow-x: auto;
	overflow-y: hidden;
	--bs-gutter-x: var(--gutter);
}

.sq-usp-grid__item {
	opacity: 1;
	width: 28rem;
	flex-shrink: 0;
}

.sq-icon-title-text {
	min-height: 100%;
	padding-top: 2.4rem;
}

.sq-icon-title-text__figure {
	width: 6.4rem;
	height: 6.4rem;
  	margin-bottom: 2.4rem;
}

.sq-icon-title-text__icon {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.sq-icon-title-text h5 {
	color: var(--text-color--accent);
	margin-bottom: 1.6rem;
}

.sq-icon-title-text p {
  	color: var(--text-color--support);
}

.sq-icon-title-text.has-border {
	border: 0.1rem solid var(--border-color);
	border-radius: 1.6rem;
	padding: 2.4rem;
}

.sq-icon-title-text.has-border .sq-icon-title-text__figure {
  	margin-bottom: 2.4rem;
}

.sq-icon-title-text.has-border h5 {
  	margin-bottom: 0.4rem;
}

/* Neutraliseert de percentagebreedtes van .col-lg-* op elke breedte: Bootstrap
   schakelt op 992px en de Sqills-md pas op 1000px, dus een reset binnen de
   1000px-query laat daartussen een gat. */
.sq-usp-grid__container .col-lg-5,
.sq-usp-grid__container .col-lg-7 {
	flex: 0 0 100%;
	width: 100%;
	max-width: 100%;
	padding-right: 0;
	padding-left: 0;
}

/* Het origineel verdeelt de rij met flex 1:2 plus een gutter; de negatieve
   zijmarges van Bootstraps .row moeten daarvoor weg. */
.sq-usp-grid__container > .row {
	margin-right: 0;
	margin-left: 0;
}

@media only screen and (min-width: 1000px) {
	.sq-block--usp-grid {
		min-width: var(--window-width);
		height: var(--window-height);
		padding: var(--header-height) 0;
	}

	.sq-usp-grid__container > .row {
		display: flex;
		flex-direction: column;
	}

	/* Origineel .content @md: margin-bottom: utils.spacing(1). */
	.sq-usp-grid__heading {
		margin-bottom: 0.8rem;
	}

	.sq-icon-title-text.has-border {
		padding: 1.6rem;
	}
	.sq-icon-title-text.has-border .sq-icon-title-text__figure {
		margin-bottom: 0.8rem;
	}
	.sq-usp-grid__list {
    	display: grid;
        grid-template-columns: 1fr 1fr;
        /* Origineel .list @md: gap spacing(3) var(--gutter). Een echte gap en geen
           bs-gutter-variabelen, want Bootstrap vertaalt die alleen in een .row. */
        gap: 2.4rem var(--gutter);
        padding: 0;
		overflow: initial;
		/* .row zet negatieve zijmarges en .col- zet zijpadding; in een grid met
		   eigen gap levert dat een te brede track en een te smalle kaart op. */
		margin-right: 0;
		margin-left: 0;
  	}
	.sq-usp-grid__item {
		width: auto;
		padding-right: 0;
		padding-left: 0;
	}

	/* Tussen 1000 en 1399px verbergt het origineel de illustratie; vanaf 1400px
	   komt hij terug als zwevend element (zie het 1400px-blok hieronder). */
	.sq-usp-grid__illustration {
		display: none;
	}
}

@media only screen and (min-width: 1400px) {
	.sq-usp-grid__container > .row {
		flex-direction: row;
		gap: var(--gutter);
		height: 100%;
	}

	.sq-usp-grid__container .col-lg-5 {
		flex: 1;
		width: auto;
		max-width: none;
	}

	.sq-usp-grid__container .col-lg-7 {
		flex: 2;
		width: auto;
		max-width: none;
	}

	/* Origineel .content @lg: margin-bottom: 0; padding-top: utils.spacing(6). */
	.sq-usp-grid__heading {
		margin-bottom: 0;
		padding-top: 4.8rem;
	}
	.sq-icon-title-text.has-border {
		padding: 2.4rem;
	}

	/* Origineel .listItem: de versprongen tweede kolom zit op breakpoint lg
	   (1400px), niet op md. Onder 1400px staan de rijen gewoon gelijk. */
	.sq-usp-grid__item:nth-child(2n) {
		transform: translateY(7.2rem);
	}
	/* Origineel .illustration @lg: bottom: var(--header-height). */
	.sq-usp-grid__illustration {
		display: block;
		position: absolute;
		left: var(--horizontal-margin);
		bottom: var(--header-height);
		width: 100%;
		aspect-ratio: 1 / 1;
		max-width: 300px;
		margin: 0;
	}
	.sq-icon-title-text.has-border .sq-icon-title-text__figure {
		margin-bottom: 2.4rem;
	}
}