#articles { color: #FFF; }
#articles > .content-wrapper {}
#articles > .content-wrapper > .title {
	line-height: normal;
	font-weight: 700;
}
#articles > .content-wrapper > .title > span { color: var(--off-color); }
#articles > .content-wrapper > .description { font-weight: 200; }
#articles > .content-wrapper > .cta {
	position: relative;
	display: flex; max-width: 300px;
	flex-direction: column;
	justify-content: center;
	padding-right: 135px;
	margin-top: 80px;
	margin-left: auto;
	
	text-align: right;
	font-size: 20px;
	font-weight: 500;
	
	cursor: pointer;
}
#articles > .content-wrapper > .cta:before,
#articles > .content-wrapper > .cta:after {
	content: '';
	position: absolute; top: 50%; right: 0; transform: translateY(-50%);
	display: block; height: 105px; width: 105px;
	
	border-radius: 50%;
}
#articles > .content-wrapper > .cta:before {
	transform: translateY(-50%);
	background-color: var(--off-color);
}
#articles > .content-wrapper > .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 #articles > .content-wrapper > .cta:after { transition: transform .2s ease-out; }
#articles > .content-wrapper > .cta:hover:after { transform: translateY(-50%) rotate(0); }

@media (min-width: 900px) {
	#articles > .content-wrapper > .title { font-size: 50px; }
	#articles > .content-wrapper > .description {
		margin-bottom: 80px;
		font-size: 25px;
	}
}
@media (max-width: 899.99px) {
	#articles > .content-wrapper > .title { font-size: 30px; }
	#articles > .content-wrapper > .description {
		margin-bottom: 40px;
		font-size: 20px;
	}
}