/* ------------------------------------------------------------ *\
	Listing
\* ------------------------------------------------------------ */

.listing {}

.listing .listing__intro {
	margin-bottom: 40px;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 30px;
	align-items: end;
}

.listing .listing__head {
	display: grid;
	gap: 20px;
	grid-column: span 2;
}

.listing .listing__head:only-child {
	grid-template-columns: repeat(2, 1fr);
	grid-column: span 5;
}

.listing .listing__featured {
	grid-column: span 3;
}

.listing .listing__featured:only-child {
	grid-column: span 5;
}

.listing .listing__entry h2 {
	line-height: 1.2;
}

.listing .listing__grid {
	display: grid;
	gap: 30px;
}

.listing .listing__grid--2 {
	grid-template-columns: repeat(2, 1fr);
}

.listing .listing__grid--3 {
	grid-template-columns: repeat(3, 1fr);
}

.listing__actions {
	margin-top: 60px;
}

/* Responsive  */

@media(max-width: 1340px){
	.listing .listing__head,
	.listing .listing__head:only-child {
		grid-template-columns: repeat(1, 1fr);
	}

	.listing .listing__grid--3 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media(max-width: 1200px){
	.listing .listing__intro {
		grid-template-columns: repeat(1, 1fr);
	}

	.listing .listing__head,
	.listing .listing__head:only-child,
	.listing .listing__featured {
		grid-column: span 1;
	}


	.listing .listing__grid {
		gap: 30px 10px;
	}
}

@media(max-width: 767px){
	.listing .listing__grid {
		grid-template-columns: repeat(1, 1fr);
	}
}

/* ------------------------------------------------------------ *\
	Nav Buttons
\* ------------------------------------------------------------ */

.nav-buttons {}

.nav-buttons strong {
	display: block;
	margin-bottom: 20px;
	text-transform: uppercase;
}

.nav-buttons ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}

.nav-buttons ul a {
	appearance: none;
	display: inline-block;
	text-transform: uppercase;
	border: 2px solid #FFC32A;
	border-radius: 20px;
	padding: 2px 25px;
	color: #000;
	font-weight: 700;
	transition: background .3s;
}

.nav-buttons ul a:hover {
	background: #FFC32A;
}

/* ------------------------------------------------------------ *\
	Tile Article
\* ------------------------------------------------------------ */

.tile-article {
	position: relative;
	background: #fff;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 30px 60px -30px;
	transition: box-shadow .3s;
}

.tile-article:hover {
	box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
}

.tile-article .tile__link {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;

	z-index: 5;
}

.tile-article .tile__image {
	position: relative;
	aspect-ratio: 453 / 400;
	max-height: 400px;
	min-width: 100%;
}

.tile-article .tile__image img {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	object-fit: cover;
	width: 100%;
	height: 100%;
}

.tile-article .tile__content {
	position: relative;
	padding: 0 30px 30px;
}

.tile-article .tile__content:before {
	content: '';
	position: absolute;
	top: -30px;
	height: 31px;
	left: 0;
	right: 0;
	background: #fff;
	clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.tile-article .tile__meta {
	line-height: 1.2;
}

.tile-article .tile__meta a {
	display: inline-block;
	position: relative;
	z-index: 5;
	text-transform: uppercase;
	font-size: 14px;
	font-weight: 700;
	color: var(--e-global-color-text);
}

.tile-article .tile__title h4 {
	color: var(--e-global-color-secondary);
}

/* Featured  */

@media(min-width: 768px){
	.tile-article--featured {
		display: flex;
		flex-direction: row-reverse;
	}

	.tile-article--featured .tile__image {
		width: 60%;
		min-width: 60%;
		flex: 0 0 60%;
	}

	.tile-article--featured .tile__content {
		width: 40%;
		flex: 0 0 40%;
		padding: 40px;
	}

	.tile-article--featured .tile__content:before {
		position: absolute;
		top: 0;
		height: 100%;
		left: calc(100% - 1px);
		right: auto;
		width: 100px;
		clip-path: polygon(0 0, 100% 0, 0 100%);
	}
}

/* ------------------------------------------------------------ *\
	Paging
\* ------------------------------------------------------------ */

.paging {
	display: flex;
	align-items: center;
	justify-content: center;
	text-transform: uppercase;
	gap: 20px;
	font-family: Poppins, sans-serif;
	font-size: 14px;
	font-weight: 700;
}

.paging ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
}

div.paging a {
	color: var( --e-global-color-text );
}

.paging li.current a {
	color: var(--e-global-color-secondary);
}