/* -------------------------------------------------- */
/* Angebote: Vertrauen                                  */
/* -------------------------------------------------- */

.section--vertrauen {
	background: var(--color-bg-alt);
}

.vertrauen-grid {
	max-width: var(--max-width);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4rem;
	align-items: center;
}

.vertrauen__image img {
	width: 100%;
	display: block;
	border-radius: var(--radius);
	box-shadow: var(--shadow-float);
}

.vertrauen__vorteile {
	margin-top: 2rem;
	display: grid;
	gap: 1.5rem;
}

.vorteil {
	display: flex;
	gap: 1.25rem;
	align-items: flex-start;
}

.vorteil__icon {
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	/* An icon tile like .icon-tile and .kontakt-info__icon, so it takes the
	   same shape they do. Read through --radius-child it came out a circle
	   here, purely because this one is not inside a card. */
	border-radius: var(--radius-nested);
	background: var(--color-gradient-end);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
}

.vorteil__icon svg {
	width: 20px;
	height: 20px;
}

.vorteil h4 {
	margin: 0 0 0.25em;
	font-size: var(--text-md);
	text-transform: none;
	font-family: inherit;
}

.vorteil p {
	margin: 0;
	font-size: var(--text-sm);
}