/*
 * USP row. Grid with 1px gaps on a border-coloured background draws the
 * dividers in any column count, square corners like the rest of the site.
 */
/* Same as the delivery box: fill the Elementor column instead of shrinking to content. */
.elementor-widget.elementor-widget-pg_usp {
	width: 100%;
	max-width: 100%;
	align-self: stretch;
}

.pg-usp {
	width: 100%;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: repeat(var(--pg-usp-cols, 3), minmax(0, 1fr));
	gap: 1px;
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--pg-border);
	border: 1px solid var(--pg-border);
	border-radius: var(--pg-radius);
	font-family: var(--pg-font-body);
}

.pg-usp__item {
	display: flex;
	align-items: center;
	gap: var(--pg-space-12);
	margin: 0;
	padding: var(--pg-space-12) var(--pg-space-16);
	background: var(--pg-white);
}

.pg-usp__body {
	min-width: 0;
}

.pg-usp__title {
	display: block;
	font-size: var(--pg-fs-14);
	font-weight: 600;
	line-height: 1.3;
	color: var(--pg-text);
}

.pg-usp__sub {
	display: block;
	margin-top: 2px;
	font-size: var(--pg-fs-12);
	line-height: 1.4;
	color: var(--pg-muted);
}

@media (max-width: 767px) {
	.pg-usp {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* An odd last item takes the full row instead of leaving a grey hole. */
	.pg-usp__item:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}

	.pg-usp__item {
		padding: var(--pg-space-12);
	}
}