#container > header {
	position: relative; z-index: 1;
	padding-top: 150px;
	
	isolation: isolate;
}
@media (min-width: 900px)	 { #container > header { margin-bottom: 100px; } }
@media (max-width: 899.99px) { #container > header { margin-bottom: 75px; } }

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

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

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

#container > header > .content-wrapper > .header {
	display: grid;
	grid-auto-rows: auto;
	align-items: flex-end;
	column-gap: 25px;
	row-gap: 25px;
}
@media (min-width: 900px) {
	#container > header > .content-wrapper > .header {
		grid-template-areas: "content controls filters";
		grid-template-columns: 1fr 270px auto;
	}
}
@media (max-width: 899.99px) {
	@media (min-width: 600px) {
		#container > header > .content-wrapper > .header {
			grid-template-areas:
				"content content"
				"controls filters";
			grid-template-columns: 1fr auto;
		}
	}
	@media (max-width: 599.99px) {
		#container > header > .content-wrapper > .header {
			grid-template-areas:
				"content"
				"controls"
				"filters";
			grid-template-columns: 1fr;
		}
	}
}

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

#container > header > .content-wrapper > .header > .content {
	grid-area: content;
	display: flex;
	flex-direction: column;
	row-gap: 25px;
}
#container > header > .content-wrapper > .header > .content > * {
	max-width: 475px;
	margin: 0;
	
	text-wrap: balance;
	font-weight: 500;
}
#container > header > .content-wrapper > .header > .content > .title { line-height: 100%; }
#container > header > .content-wrapper > .header > .content > .description { line-height: 130%; }
@media (min-width: 900px) {
	#container > header > .content-wrapper > .header > .content > .title { font-size: 50px; }
	#container > header > .content-wrapper > .header > .content > .description { font-size: 20px; }
}
@media (max-width: 899.99px) {
	#container > header > .content-wrapper > .header > .content > .title { font-size: 36px; }
	#container > header > .content-wrapper > .header > .content > .description { font-size: 16px; }
}

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

#container > header > .content-wrapper > .header > .controls {
	grid-area: controls;
	width: 100%; overflow: hidden;
	
	background-color: #FFF;
	border: solid 3px #FFF;
	border-radius: 23px;
	
	isolation: isolate;
}
#container > header > .content-wrapper > .header > .controls .control {
	display: flex; height: 40px;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	
	background-color: transparent;
	border-radius: 20px;
	
	white-space: nowrap;
	text-align: center;
	font-weight: 500;
	font-size: 15px;
	color: #000;
	
	cursor: pointer;
	
	transition:
		background-color .2s ease-out,
		color			 .2s ease-out;
}
#container > header > .content-wrapper > .header > .controls .control:hover {
	background-color: #D5ED99;
	color: #000;
}
#container > header > .content-wrapper > .header > .controls .control.current {
	background-color: #364A67;
	color: #FFF;
}
@media (max-width: 420px) { #container > header > .content-wrapper > .header > .controls .control { width: 180px; } }

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

#container > header > .content-wrapper > .header > .filters {
	position: relative; z-index: 1;
	grid-area: filters;
}
#container > header > .content-wrapper > .header > .filters > .current {
	position: relative;
	display: flex; height: 46px; overflow: hidden;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	
	padding-left: 23px;
	padding-right: 58px;
	
	background-color: #D5ED99;
	border-radius: 23px;
	
	white-space: nowrap;
	font-weight: 500;
	font-size: 15px;
	color: #000;
	
	cursor: pointer;
	
	transition:
		background-color .2s ease-out,
		color			 .2s ease-out;
}
#container > header > .content-wrapper > .header > .filters > .current:hover {
	background-color: #364A67;
	color: #FFF;
}
#container > header > .content-wrapper > .header > .filters > .current:after {
	content: '';
	position: absolute; top: 52%; right: 23px; transform: translateY(-50%);
	display: block; height: 7px; width: 12px;
	
	background-color: currentColor;
	
	--mask-image: url("../../images/icons/arrow.down.svg");
	--mask-position: center;
	--mask-repeat: no-repeat;
	--mask-size: contain;
	
	-webkit-mask-image: var(--mask-image);
	mask-image: var(--mask-image);
	-webkit-mask-position: var(--mask-position);
	mask-position: var(--mask-position);
	-webkit-mask-repeat: var(--mask-repeat);
	mask-repeat: var(--mask-repeat);
	-webkit-mask-size: var(--mask-size);
	mask-size: var(--mask-size);
}
#container > header > .content-wrapper > .header > .filters > .categories {
	position: absolute; top: 49px; right: 0; transform: translateY(-20px);
	padding: 23px;
	
	background-color: #D5ED99;
	border-radius: 23px;
	opacity: 0;
	
	transition:
		transform .2s ease-out,
		opacity	  .2s ease-out;
	
	pointer-events: none;
}
#container > header > .content-wrapper > .header > .filters.open > .categories {
	transform: translateY(0);
	opacity: 1;
	pointer-events: auto;
}
#container > header > .content-wrapper > .header > .filters > .categories > .category {
	display: block;
	
	white-space: nowrap;
	font-weight: 500;
	font-size: 15px;
	color: #000;
}
#container > header > .content-wrapper > .header > .filters > .categories > .category:not(:last-child) {
	margin-bottom: 10px;
}

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

#container > header > .content-wrapper > .posts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(286px, 100%), 1fr));
	grid-auto-rows: auto;
	column-gap: 20px;
	margin-bottom: -20px;
	
	filter: drop-shadow(0 0 10px rgba(0,0,0,.2));
}
@media (min-width: 900px) {
	#container > header > .content-wrapper > .posts > .single-post:first-child {
		grid-column: span 2;
		grid-row: span 2;
	}
}

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