.PFA {
	position: relative;
	--accent-color: var(--blue);
	background: var(--dark-blue);
}

.PFA::before {
	content: "";
	position: absolute;
	bottom: -100rem;
	left: 0;
	border: 100rem solid transparent;
	border-left-color: var(--white);
}

.PFA[data-accent-color="purple"] {--accent-color: var(--purple);}
.PFA[data-accent-color="light-blue"] {--accent-color: var(--light-blue);}

.PFA .container::before,
.PFA .container::after {
	content: "";
	display: block;
	overflow: hidden;
}

.PFA .b-frame {
	position: relative;
}

.PFA .b-column:last-child {
	align-self: flex-start;
}

.PFA .deco {
	pointer-events: none;
	position: absolute;
	bottom: -143rem;
	left: -208rem;
	width: 250rem;
	height: 540rem;
}

.PFA .deco-color {
	fill: var(--accent-color);
}

.PFA .points {
	margin: 60rem 0 0 0 !important;
	padding: 0;
	list-style: none;
	height: 100rem;
}

.PFA .points li {
	display: flex !important;
	position: absolute;
	list-style: none;
	margin: 0;
	padding: 0;
	align-items: center;
	max-width: 570rem;
	transition:  opacity 0.25s, transform 0.25s;
}

.PFA .points li.hidden {
	opacity: 0;
	transform: translate(0, 30rem);
}

.PFA .icon {
	flex: 0 0 auto;
	width: 100rem;
	height: 100rem;
	margin-right: 35rem;
}

.PFA .image {
	position: relative;
	margin: -35rem -110rem -35rem 35rem;
}

.PFA .image img {
	border-radius: 100%;
	position: relative;
}

.PFA .image::before {
	content: "";
	position: absolute;
	top: 50%;
	left: -140rem;
	border: 480rem solid transparent;
	border-right-color: var(--accent-color);
	transform: translate(0, -50%);
}

.PFA .scroll {
	position: absolute;
	bottom: 70rem;
	left: 50%;
	width: 47rem;
	height: 73rem;
	transform: translate(-50%, 50%);
	cursor: pointer;
	color: var(--green);
	transition: color 0.25s;
}

.PFA .scroll:hover {
	color: var(--white);
}

.PFA .scroll svg {
	display: block;
	width: 100%;
	height: auto;
	fill: currentColor;
	transition: fill 0.25s;
}

@media screen and (max-width: 960px) {
	.PFA::before {display: none;}
	.PFA .deco {display: none;}
	.PFA .points {margin-top: 30rem !important; height: 60rem;}
	.PFA .icon {width: 60rem; height: 60rem; margin-right: 20rem;}
	.PFA .image {margin: 40rem 0 0;}
	.PFA .image::before {
		border-width: 180rem;
		border-right-color: transparent;
		border-bottom-color: var(--accent-color);
		top: auto;
		left: 50%;
		bottom: -60rem;
		transform: translate(-50%, 0);
	}
	.PFA .scroll {display: none;}
}



/* NO TRIANGLE */

.PFA[data-style="no-triangle"] .deco svg {display: none;}
.PFA[data-style="no-triangle"] .deco::before {display: none;}
.PFA[data-style="no-triangle"] .image::before {display: none;}

.PFA[data-style="no-triangle"] .b-frame::before {
	content: "";
	position: absolute;
	bottom: 0;
	left: -540rem;
	border: 140rem solid transparent;
	border-bottom-color: var(--white);
}

.PFA[data-style="no-triangle"] .deco {
	width: 328rem;
	height: 1005rem;
	background: url(images/deco.svg) no-repeat center / 100%;
	left: auto;
	right: -367rem;
	bottom: -88rem;
}