/**
 * Layout: USPs
 * Slug: usps
 */

.usps-layout {
	padding-block: max(3rem, calc(6 * var(--su)));
}
.usps-layout.blue-bg {
	border-radius: 2rem;
	background-color: #E8EEF8;
}

.usps-layout .title-col:not(:has(.pk-text)) {
	text-align: center;
}

.usps-layout .usps-col {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	align-items: stretch;
	gap: max(1rem, calc(1 * var(--su)));
	margin-top: max(2rem, calc(3.5 * var(--su)));
}
.usps-layout .usps-col .usp {
	grid-column: span 1;
	display: flex;
	flex-direction: column;
	width: 100%;
	background-color: #ffffff;
	border-top-right-radius: 2rem;
	padding: max(2rem, calc(3.5 * var(--su)))
	max(1.5rem, calc(2.5 * var(--su)));
}
.usps-layout .usps-col .usp .pk-heading {
	font-weight: 600;
	font-family: var(--pk-text-font-family);
}
.usps-layout .usps-col .usp:has(.pk-button-group) {
	padding-left: max(1.25rem, calc(2 * var(--su)));
}
.usps-layout .usps-col .usp > .icon-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	border: 1px solid rgba(var(--dia-pink-rgb), 0.15);
	border-radius: 100%;
	width: max(2.5rem, calc(2.5 * var(--su)));
	aspect-ratio: 1;
	margin-bottom: max(1.25rem, calc(1.5 * var(--su)));
}
.usps-layout .usps-col .usp > .icon-wrapper svg path {
	fill: var(--dia-pink);
	stroke: var(--dia-pink);
}
.usps-layout .usps-col .usp .pk-heading {
	margin-bottom: max(1rem, calc(1.25 * var(--su)));
}
.usps-layout .usps-col .usp:has(.pk-button-group) .pk-text {
	margin-top: auto;
}
.usps-layout .usps-col .usp .pk-button-group {
	margin-top: 1rem;
}

@media screen and (max-width: 992px) {
	.usps-layout .usps-col {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media screen and (max-width: 767px) {
	.usps-layout .usps-col {
		display: flex;
		flex-direction: column;
	}
}