.landing main {
	padding-top: 2em;
}
.landing-banner {
	max-width: 1200px;
	margin-inline: auto;
}
.landing-banner > div.mask {
	border-radius: 0.5em;
}
.landing-banner img {
	aspect-ratio: 5/2;
	border-radius: 0.5em;
	object-fit: cover;
	vertical-align: bottom;
}
.landing-banner > div {
	position: relative;
}
.landing-banner .overlay {
	position: absolute;
	bottom: 1em;
	/* left: 1.75em;
	right: 1.75em; */
	color: #fff;
	z-index: 1;
	/* width: 80%; */
	width: 94%;
	margin-inline: 1.75em;
}
.landing-banner .overlay h1 {
	font-size: 2.125em;
	margin-bottom: 0.25em;
	max-width: 80%;
}
.landing-banner .banner-btns {
	line-height: 1.6;
}
.landing-banner .banner-btns button {
	margin-block: 1em;
}
.article-preview {
	/* z-index: -5; */
}
.article-preview img {
	width: 40px;
	height: 40px;
	object-fit: cover;
	border-radius: 100%;
}
.gradient {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 85%;
	background-image: linear-gradient(
	to bottom,
	rgba(50, 50, 50, 0),
	rgba(50, 50, 50, 0.6)
	);
	border-radius: 0.5em;
	display: block;
}
.listing {
	max-width: 1200px;
	margin: 6em auto 0;
}
.listing h2 {
	font-size: 2em;
}
.listing-filters {
	display: flex;
	justify-content: space-between;
	margin-inline: 1rem;
}
.listing-filters ul {
	display: flex;
	column-gap: 3.5em;
}
.listing-filters ul li {
	list-style: none;
}
.listing-filters ul li .active {
	font-weight: 600;
}
.grid {
	display: grid;
	column-gap: 1em;
	grid-template-columns: repeat(2, 1fr);
}
.grid.variable {
	grid-template-columns: repeat(6, 1fr);
}
.grid.variable div {
	grid-column: span 2;
}
.grid.variable div:nth-child(4),
.grid.variable div:nth-child(5) {
	grid-column: span 3;
}
.grid div {
	margin-bottom: 3em;
}
.grid img {
	border-radius: 0.5em;
	margin-bottom: 0.75em;
}
.grid h3 {
	margin-bottom: 1rem;
	font-size: 1.75rem;
}
.flex {
	display: flex;
}
.space-between {
	justify-content: space-between;
}
section > .tag {
	margin-left: 1rem;
}
p.tag {
	text-transform: uppercase;
	font-family: 'Graphik Medium';
}

@media screen and (max-width: 768px) {

}

@media screen and (max-width: 500px) {

}


/* Banner transition */
.landing-banner .mask.s1,
.landing-banner .mask.s2 {
	overflow: hidden;
}
.landing-banner .mask-content.s2 {
	transform: translateX(-30%);
}
.landing-banner .mask-content.s1 {
	transition: ease-out 600ms;
	transition-delay: 600ms;
}
.landing-banner .mask-content.s2 {
	transition: ease-out 600ms;
	transition-delay: 100ms;
}
.landing-banner .overlay.s2 {
	width: 72%;
}
.landing-banner .overlay.s1,
.landing-banner .overlay.s2 {
	transition: ease-out 1s;
	transition-delay: 300ms;
}
.landing .overlay.s2 #preview-btn {
	opacity: 0;
	transform: translateY(5%);
	transition: ease-in 200ms;
}
.landing .overlay.s1.s2 #preview-btn {
	opacity: 0;
	transform: translateY(5%);
	transition: ease-in 200ms;
}
.landing .overlay.s1 #hide-btn {
	opacity: 0;
	transition-delay: 200ms;
	transform: translateY(5%);
	transition: ease-in 200ms;
}
.landing .overlay.s1 #preview-btn {
	opacity: 1;
	transform: translateY(0);
	transition: ease-in 200ms;
	transition-delay: 1000ms;
}
.landing .overlay.s1.s2 #hide-btn {
	opacity: 1;
	transform: translateY(0);
	transition: ease-in 200ms;
	display: inline-block;
	transition-delay: 3000ms;
}
.landing-banner .article-preview.s1.s2 {
	transition: transform 2s cubic-bezier(0.17, 0.87, 0.59, 1),
    			opacity 0.8s ease-out;
	opacity: 1;
	transition-delay: 800ms;
	/* transform: translateY(0); */
	bottom: 1em;
}
.landing-banner .article-preview.s1 {
	width: 27%;
	position: absolute;
	right: 0;
	bottom: 1em;
	padding-right: 1.5em;
	/* transform: translateY(1em); */
	opacity: 0;
	transition: transform 0.8s ease-out,
				opacity 0.6s ease-in;
}
.article-preview.s1 .author {
	padding-bottom: 0.5em;
	border-bottom: solid 1px #33333340;
	width: 95%;
}
.article-preview.s1 a {
	margin: 1.5em 0 1em;
	display: block;
	line-height: 1.6;
	transition: transform ease-out 2s;
	transition-delay: 400ms;
}