#article {}
@media (min-width: 900px)	 { #article:not(:last-child) { margin-bottom: 150px; } }
@media (max-width: 899.99px) { #article:not(:last-child) { margin-bottom: 100px; } }

/*-------------------------------------------------------------------------------------------------------*/

#article > * { position: relative; overflow: hidden; }
#article > :not(:last-child) { margin-bottom: 45px; }
@media (min-width: 900px)	 { #article > * { border-radius: 30px; } }
@media (max-width: 899.99px) { #article > * { border-radius: 10px; } }

/*-------------------------------------------------------------------------------------------------------*/

#article > .thumbnail {}
#article > .thumbnail > img {
	display: block; height: 100%; width: 100%;
	object-fit: cover;
	object-position: center;
}
@media (min-width: 900px)	 { #article > .thumbnail { height: 554px; } }
@media (max-width: 899.99px) { #article > .thumbnail { height: 350px; } }

/*-------------------------------------------------------------------------------------------------------*/

#article > .content {
	background-color: #FFF;
	border: solid .5px var(--off-color);
	box-shadow: 0px 4px 4px rgba(0,0,0,.25);
}
#article > .content > .wrapper {
	max-width: 950px;
	margin: 0 auto;
	
	font-weight: 300;
}
#article > .content > .wrapper > .cat {
	display: block; overflow: hidden;
	margin-bottom: 40px;
	
	text-overflow: ellipsis;
	line-height: normal;
	font-size: 30px;
	font-weight: 600;
	color: var(--off-color);
}
.loaded #article > .content > .wrapper > .cat { transition: color .2s ease-out; }
#article > .content > .wrapper > .cat:hover { color: var(--main-color); }
#article > .content > .wrapper > .title {
	margin-bottom: 50px;
	font-weight: 700;
}
#article > .content > .wrapper > .body {}

@media (min-width: 900px) {
	#article > .content { padding: 140px 50px; }
	#article > .content > .wrapper {
		line-height: 34px;
		font-size: 20px;
	}
	#article > .content > .wrapper > .title {
		line-height: 64px;
		font-size: 50px;
	}
	#article > .content > .wrapper > .body {
		font-size: 20px;
		font-weight: 34px;
	}
}
@media (max-width: 899.99px) {
	#article > .content { padding: 45px 25px; }
	#article > .content > .wrapper {
		line-height: 30px;
		font-size: 18px;
	}
	#article > .content > .wrapper > .title {
		line-height: 40px;
		font-size: 30px;
	}
	#article > .content > .wrapper > .body {
		font-size: 18px;
		font-weight: 30px;
	}
}

/*-------------------------------------------------------------------------------------------------------*/

#article > .author {
	background-color: #FFF;
	border: solid .5px var(--off-color);
	box-shadow: 0px 4px 4px rgba(0,0,0,.25);
}
#article > .author > .wrapper {}
@media (min-width: 900px) {
	#article > .author { padding: 50px; }
	#article > .author > .wrapper {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
}
@media (max-width: 899.99px) {
	#article > .author { padding: 25px; }
	#article > .author > .wrapper { padding-bottom: 40px; }
}

/*-------------------------------------------------------------------------------------------------------*/

#article > .author > .wrapper > .member {}
@media (min-width: 900px) {
	#article > .author > .wrapper > .member {
		display: flex;
		flex-direction: row;
		align-items: center;
		column-gap: 75px;
	}
	#article > .author > .wrapper > .member > .avatar { flex: 0 0 225px; }
	#article > .author > .wrapper > .member > .info { white-space: nowrap; }
	#article > .author > .wrapper > .member > .info > .name { margin-bottom: 20px; }
}
@media (max-width: 899.99px) {
	#article > .author > .wrapper > .member { margin-bottom: 80px; }
	#article > .author > .wrapper > .member > .avatar { margin-bottom: 25px; }
	#article > .author > .wrapper > .member > .info > .name { margin-bottom: 15px; }
}

/*-------------------------------------------------------------------------------------------------------*/

#article > .author > .wrapper > .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;
}
#article > .author > .wrapper > .cta:not(:last-child) { margin-bottom: 50px; }
#article > .author > .wrapper > .cta:before,
#article > .author > .wrapper > .cta:after {
	content: '';
	position: absolute; top: 50%; right: 0; transform: translateY(-50%);
	display: block; height: 105px; width: 105px;
	
	border-radius: 50%;
}
#article > .author > .wrapper > .cta:before {
	transform: translateY(-50%);
	background-color: var(--off-color);
}
#article > .author > .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 #article > .author > .wrapper > .cta:after { transition: transform .2s ease-out; }
#article > .author > .wrapper > .cta:hover:after { transform: translateY(-50%) rotate(0); }

@media (max-width: 899.99px) {
	#article > .author > .wrapper > .cta { margin-left: auto; }
}