body[data-color-scheme="light"] {
	--image-border-color: #eee;
}

body[data-color-scheme="dark"] {
	--image-border-color: #222;
}

.hello-grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	row-gap: 2.5em;
	column-gap: 1.5em;
}

@media only screen and (max-width: 1068px) {
	.hello-grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media only screen and (max-width: 734px) {
	.hello-grid {
		grid-template-columns: 1fr;
		row-gap: 2.5em;
	}
}

.hello-card,
.hello-card a,
.hello-card a p,
.hello-card a:hover {
	text-decoration: none !important;
	color: inherit;
	overflow: hidden;
}

.hello-card {
	position: relative;
}

.hello-img-wrapper {
	width: 100%;
	/* height: 150px; */
	overflow: hidden;
	border-radius: 12px;
	border: 1px solid var(--image-border-color) !important;
	position: relative;
	display: flex;
	align-items: center;
}

body[data-color-scheme="light"] .hello-img-wrapper {
	border: 1px solid var(--image-border-color) !important;
}

.hello-img {
	width: 100%;
	/* height: 150px; */
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 8px;
	transition: transform 0.4s ease;
	display: block;
}

@media only screen and (max-width: 1068px) {
	.hello-img-wrapper,
	.hello-img {
		width: 100%;
		height: unset;
	}
}

@media only screen and (min-width: 1068px) {
	.hello-card:hover .hello-img {
		transform: scale(1.02);
	}
}

.hello-title {
	font-weight: bold;
	margin-top: 1em;
}

body[data-color-scheme="dark"] .hello-title {
	color: #f5f5f7 !important;
}

.hello-desc,
.current-edition-desc {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-top: 0.3em;
}

.hello-pill {
	position: absolute;
	top: 0;
	left: 0;
	background-color: #333;
	color: #fff;
	border-radius: 0px;
	border-bottom-right-radius: 8px;
	padding: 2px 6px;
	font-size: 12px;
	font-weight: bold;
	text-transform: uppercase;
	border: 1px solid #222;
}

.hello-headline {
	margin-bottom: 1em;
}

.current-edition-item {
	margin-top: 2em;
	margin-bottom: 4em;
}

@media only screen and (max-width: 734px) {
	.current-edition-item {
		margin-top: 1.5em;
		margin-bottom: 3em;
	}
}

.current-edition-item .hello-img-wrapper {
	height: unset;
	position: relative;
	/* border-radius: 20px; */
	border-radius: 8px;
	max-height: 440px;
}

@media only screen and (max-width: 734px) {
	.current-edition-item .hello-img-wrapper {
		height: unset;
		position: relative;
		border-radius: 8px;
	}
}

.current-edition-item .hello-img-wrapper img {
	display: block;
}

@media only screen and (min-width: 1068px) {
	.current-edition-item .current-edition-img-container {
		transition: transform 0.4s ease;
	}

	.current-edition-item:hover .current-edition-img-container {
		transform: scale(1.02);
	}
}

.current-edition-img-container {
	position: relative;
}

.current-edition-img-container::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, 0.35) 0%,
		rgba(0, 0, 0, 0) 105%
	);
	pointer-events: none;
	transition: 0.4s ease;
}

@media only screen and (max-width: 734px) {
	.current-edition-img-container::before {
		background: linear-gradient(
			to top,
			rgba(0, 0, 0, 0.35) 0%,
			rgba(0, 0, 0, 0) 105%
		);
	}
}

.current-edition-copy {
	position: absolute;
	bottom: 2em;
	left: 2em;
	width: 40%;
	z-index: 2;
}

@media only screen and (max-width: 1068px) {
	.current-edition-copy {
		width: 70%;
		bottom: 1.5em;
		left: 1.5em;
	}
}

@media only screen and (max-width: 734px) {
	.current-edition-copy {
		width: 90%;
		bottom: 1em;
		left: 1em;
	}
}

body[data-color-scheme="dark"] a .current-edition-title,
body[data-color-scheme="light"] a .current-edition-title {
	color: #fff !important;
}

body[data-color-scheme="dark"] a .current-edition-desc,
body[data-color-scheme="light"] a .current-edition-desc {
	color: #fff !important;
	margin-top: 0.3em;
}

@media only screen and (max-width: 1068px) {
	a .current-edition-desc {
		font-size: 14px;
	}
}

h1 + p {
	margin-top: 0.5em !important;
}

/* ========== Grid ========== */
#main section.section {
	padding-top: 0;
	padding-bottom: 4em;
}
#main section.section.section-hero {
	padding-top: 4em;
	padding-bottom: 4em;
}

@media only screen and (max-width: 734px) {
	#main section.section {
		padding-top: 0;
		padding-bottom: 3em;
	}
	#main section.section.section-hero {
		padding-top: 3em;
		padding-bottom: 3em;
	}
	#main section .section-content .row > .column {
		padding: 0;
	}
}