/*		|8		|		|24		|		|40		|		|56		|		|72		|		|88		|		|104	|		|*/
.listing{
		display					:	flex								;
		align-items				:	flex-start							;
		max-width				:	var(--wide)							;
		margin					:	0 auto								;
		padding					:	80px								;
}
.categories{
		flex					:	0 0 28.736%							;
		margin					:	10px 0 40px							;
		padding					:	20px 20px 40px 87px					;
		background				:	rgba(21,62,97,.06)					;
}
.categories h2{
		margin					:	20px 0 25px							;
		font-size				:	15px								;
		font-weight				:	600									;
		color					:	var(--navy)							;
}
.categories ul{
		margin					:	0									;
		padding					:	0									;
		list-style				:	none								;
}
.categories ul ul{
		padding-left			:	29px								;
}
.categories a{
		display					:	inline-block						;
		padding-left			:	17px								;
		text-indent				:	-17px								;
		font-size				:	19px								;
		line-height				:	1.85								;
		color					:	#686868								;
		text-decoration			:	none								;
}
.categories a::before{
		content					:	""									;
		display					:	inline-block						;
		width					:	11px								;
		height					:	11px								;
		margin-right			:	6px									;
		border					:	1px solid #767676					;
		border-radius			:	50%									;
		background				:	#fff								;
		text-indent				:	0									;
		vertical-align			:	1px									;
}
.categories a:hover{
		color					:	var(--navy)							;
}
.categories a.current::before{
		border-color			:	#0075ff								;
		background				:	radial-gradient(#0075ff 45%,#fff 50%)	;
}
.posts{
		display					:	grid								;
		flex					:	1 1 auto							;
		grid-template-columns	:	repeat(3,1fr)						;
		gap						:	35px 30px							;
		margin					:	0									;
		padding					:	0 20px 0 30px						;
		list-style				:	none								;
}
.posts a{
		display					:	block								;
		height					:	100%								;
		background				:	var(--navy)							;
		text-decoration			:	none								;
		box-shadow				:	0 0 10px rgba(0,0,0,.15)			;
}
.posts img{
		width					:	100%								;
		aspect-ratio			:	2/1									;
		object-fit				:	cover								;
}
.posts h2{
		margin					:	0									;
		padding					:	22px 20px							;
		font-size				:	20px								;
		font-weight				:	400									;
		line-height				:	1.5									;
		color					:	#fff								;
}
@media (max-width:1024px){
	.listing{
		flex-direction			:	column								;
		align-items				:	stretch								;
		padding					:	20px								;
	}
	.categories{
		margin					:	0 0 40px							;
	}
	.posts{
		padding					:	0									;
	}
}
@media (max-width:767px){
	.categories{
		padding					:	20px								;
	}
	.posts{
		grid-template-columns	:	1fr									;
	}
}