/* BPAS Demo Invitation: light panel, text and button left, numbered list right. */
.bpas-b .bpas-demo {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: 40px;
	align-items: center;
	padding: 60px;
	border-radius: var(--bpas-radius);
	background: var(--theme-color3);
}

.bpas-b .bpas-demo__main {
	min-width: 0;
}

.bpas-b .bpas-demo .bpas-title {
	margin-bottom: 0;
}

.bpas-b .bpas-demo__btn {
	margin-top: 20px;
}

.bpas-b .bpas-demo ol {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 15px;
	counter-reset: dm;
}

.bpas-b .bpas-demo li {
	counter-increment: dm;
	position: relative;
	min-height: 92px;
	padding: 20px 20px 20px 70px;
	border-radius: var(--bpas-radius);
	background: var(--white-color);
	font-size: 15px;
	color: var(--dark-color);
}

.bpas-b .bpas-demo li::before {
	content: counter(dm, decimal-leading-zero);
	position: absolute;
	left: 20px;
	top: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var(--bpas-radius-sm);
	background: var(--dark-color);
	color: var(--theme-color2);
	font-size: 14px;
	font-weight: 800;
}

.bpas-b .bpas-demo li strong {
	display: block;
	font-size: 16px;
	color: var(--title-color);
}

@media (max-width: 991px) {
	.bpas-b .bpas-demo {
		grid-template-columns: 1fr;
		padding: 40px 30px;
	}
}

@media (max-width: 720px) {
	.bpas-b .bpas-demo {
		padding: 30px 15px;
	}

	.bpas-b .bpas-demo ol {
		grid-template-columns: 1fr;
	}
}