#articles {
	isolation: isolate;
}
@media (min-width: 900px)	 { #articles { margin: 100px 0; } }
@media (max-width: 899.99px) { #articles { margin: 75px	 0; } }

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

#articles > .content-wrapper {
	display: flex;
	flex-direction: column;
	align-items: stretch;
}
@media (min-width: 900px)	 { #articles > .content-wrapper { row-gap: 65px; } }
@media (max-width: 899.99px) { #articles > .content-wrapper { row-gap: 35px; } }

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

#articles > .content-wrapper > header {
	display: grid;
	grid-auto-rows: auto;
	row-gap: 25px;
	column-gap: 50px;
}
#articles > .content-wrapper > header > * {
	margin: 0;
	
	text-wrap: balance;
	font-weight: 500;
}
#articles > .content-wrapper > header > .title {
	grid-area: title;
	line-height: 100%;
}
#articles > .content-wrapper > header > .description {
	grid-area: description;
	line-height: 130%;
}
@media (min-width: 900px) {
	#articles > .content-wrapper > header {
		grid-template-areas: "title	description";
		grid-template-columns: repeat(2, 1fr);
		align-items: flex-end;
	}
	#articles > .content-wrapper > header > .title {
		font-size: 50px;
	}
	#articles > .content-wrapper > header > .description {
		justify-self: flex-end;
		max-width: 475px;
		
		text-align: right;
		font-size: 20px;
	}
}
@media (max-width: 899.99px) {
	#articles > .content-wrapper > header {
		grid-template-areas:
			"hook"
			"title"
			"description";
		grid-template-columns: 1fr;
	}
	#articles > .content-wrapper > header > .title { font-size: 36px; }
	#articles > .content-wrapper > header > .description { font-size: 16px; }
}

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

#articles > .content-wrapper > .posts {
	filter: drop-shadow(0 0 10px rgba(0,0,0,.2));
}
#articles > .content-wrapper > .posts > .grid {
	position: relative;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(286px, 100%), 1fr));
	grid-auto-rows: auto;
	column-gap: 20px;
	margin-bottom: -20px;
}
@media (min-width: 900px) {
	#articles > .content-wrapper > .posts > .grid:after {
		content: '';
		position: absolute; top: 250px; right: -25px; z-index: 2;
		display: block; height: 75px; width: 55px;

		background-image: url("../../images/accents/accent-pointer.png");
		background-size: contain;
		background-position: center;
		background-repeat: no-repeat;

		pointer-events: none;
		animation: grid-pointer-float 3.8s ease-in-out -1s infinite;
	}
	@keyframes grid-pointer-float {
		0%	 { transform: translateY(0px) rotate(-25deg); }
		50%	 { transform: translateY(-20px) rotate(-25deg); }
		100% { transform: translateY(0px) rotate(-25deg); }
	}
	#articles > .content-wrapper > .posts > .grid > .single-post:nth-child(4) {
		grid-column: span 2;
		grid-row: span 2;
	}
}

#articles > .content-wrapper > .posts > .grid > .single-post {
	width: 100%;
	margin-bottom: 20px;
}

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

#articles > .content-wrapper > footer {
	filter: drop-shadow(0 0 10px rgba(0,0,0,.2));
	text-align: center;
}

#articles > .content-wrapper > footer > .count-message {
	text-transform: uppercase;
	font-size: 14px;
	font-weight: 500;
}

#articles > .content-wrapper > footer > .cta-loader {
	position: relative;
	margin-top: 25px;
	
	--icon-transform: rotate(90deg);
}