/*
 * Angebote sub-pages below 981px (tablet + phone). Desktop is untouched.
 *
 * Classes set in the builder (Advanced → CSS-ID & Klassen → CSS-Klasse):
 * - retm-usp-row on the 3-column row with icon + text per column: the columns become a
 *   centred list, icon left (a bit smaller than the two text lines), a rounded upright line,
 *   then the text left-aligned.
 *   The scroll effects stay on the columns, so they keep working.
 * - retm-angebote-section on the "Body" section (and the separate "Portfolio" section of
 *   Privatevents / Geschäftskunden): smaller section titles and intro text.
 *
 * Sizes are fixed rem here; they override the retm-fs-* clamp() classes of fluid-type.css.
 */

@media only screen and (max-width: 980px) {

	/* Icon + text list */
	.retm-usp-row.et_pb_row {
		--retm-usp-fs: 1rem;
		/* Text line-height is 1.5em, so two lines = 3 × the font size; the icon is a bit smaller */
		--retm-usp-icon: calc(2.5 * var(--retm-usp-fs));
		/* Divider line between icon and text, and the gap on each side of it */
		--retm-usp-line: 3px;
		--retm-usp-space: 0.875rem;
		display: grid;
		grid-template-columns: minmax(0, max-content);
		justify-content: center;
		row-gap: 2.75rem;
		width: 90%;
	}

	/* The row's 5rem padding comes from Divi with !important */
	.et_pb_section .retm-usp-row.et_pb_row {
		padding-top: 2.5rem !important;
		padding-bottom: 2.5rem !important;
	}

	.retm-usp-row.et_pb_row::after {
		content: none;
	}

	.retm-usp-row.et_pb_row > .et_pb_column {
		display: flex;
		align-items: center;
		gap: var(--retm-usp-space);
		margin: 0;
		padding-bottom: 0;
	}

	.retm-usp-row.et_pb_row .et_pb_module {
		margin: 0 !important;
	}

	.retm-usp-row.et_pb_row .et_pb_icon {
		flex: 0 0 auto;
		width: var(--retm-usp-icon);
		text-align: center;
	}

	.retm-usp-row.et_pb_row .et_pb_icon .et_pb_icon_wrap .et-pb-icon {
		display: block;
		font-size: var(--retm-usp-icon);
		line-height: 1;
	}

	.retm-usp-row.et_pb_row .et_pb_module.et_pb_text {
		flex: 0 1 auto;
		min-width: 0;
		position: relative;
		padding-left: calc(var(--retm-usp-line) + var(--retm-usp-space));
		font-size: var(--retm-usp-fs);
		text-align: left;
	}

	/* Upright line with rounded ends between icon and text, as tall as the text */
	.retm-usp-row.et_pb_row .et_pb_module.et_pb_text::before {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		width: var(--retm-usp-line);
		border-radius: var(--retm-usp-line);
		background: currentColor;
	}

	/* Section titles and intro text */
	.retm-angebote-section .et_pb_module.retm-fs-divider-4xl .dsm-text-divider-header {
		font-size: 1.75rem;
	}

	.retm-angebote-section .et_pb_module.retm-fs-text-l {
		font-size: 1.0625rem;
	}
}