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

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

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

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

#case-studies > .content-wrapper > header {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-end;
	row-gap: 25px;
}
#case-studies > .content-wrapper > header > * {
	max-width: 450px; min-width: 300px;
	margin: 0;
	
	text-wrap: balance;
	font-weight: 500;
}
#case-studies > .content-wrapper > header > .title {
	line-height: 100%;
}
#case-studies > .content-wrapper > header > .description {
	line-height: 130%;
	font-size: 14px;
}
@media (min-width: 900px) {
	#case-studies > .content-wrapper > header > .title {
		margin-bottom: -3px;
		font-size: 40px;
	}
}
@media (max-width: 899.99px) {
	#case-studies > .content-wrapper > header > .title {
		font-size: 32px;
	}
}

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

#case-studies > .content-wrapper > .posts {
	filter: drop-shadow(0 0 10px rgba(0,0,0,.2));
}
#case-studies > .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) {
	#case-studies > .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); }
	}
	#case-studies > .content-wrapper > .posts > .grid > .single-case-study:nth-child(4) {
		grid-column: span 2;
		grid-row: span 2;
	}
}

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

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

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

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

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