#main { color: #FFF; }
#main > .content-wrapper { display: grid; }
#main > .content-wrapper > .col {}
#main > .content-wrapper > .col > .title {
	margin-bottom: 50px;
	font-weight: 700;
}
#main > .content-wrapper > .col > .title > span { color: var(--off-color); }
#main > .content-wrapper > .col > .cta {
	position: relative;
	display: flex; max-width: 300px;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	padding-right: 135px;
	
	font-size: 20px;
	font-weight: 500;
}
#main > .content-wrapper > .col > .cta:not(:last-child) { margin-bottom: 50px; }
#main > .content-wrapper > .col > .cta:before,
#main > .content-wrapper > .col > .cta:after {
	content: '';
	position: absolute; top: 50%; right: 0; transform: translateY(-50%);
	display: block; height: 105px; width: 105px;
	
	border-radius: 50%;
}
#main > .content-wrapper > .col > .cta:before {
	transform: translateY(-50%);
	background-color: var(--off-color);
}
#main > .content-wrapper > .col > .cta:after {
	transform: translateY(-50%) rotate(-45deg);
	background-color: #FFF;
	
	-webkit-mask-image: url("../../images/icons/handle.svg");
	mask-image: url("../../images/icons/handle.svg");
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 50px;
	mask-size: 50px;
}
.loaded #main > .content-wrapper > .col > .cta:after { transition: transform .2s ease-out; }
#main > .content-wrapper > .col > .cta:hover:after { transform: translateY(-50%) rotate(0); }

@media (min-width: 900px) {
	#main { padding-top: 295px; }
	#main > .content-wrapper {
		grid-template-columns: repeat(2, 1fr);
		column-gap: 50px;
	}
	#main > .content-wrapper > .col > .title { font-size: 50px; }
}
@media (max-width: 899.99px) {
	#main { padding-top: 250px; }
	#main > .content-wrapper {
		grid-template-columns: repeat(1, 1fr);
		row-gap: 50px;
	}
	#main > .content-wrapper > .col > .title { font-size: 30px; }
}