@font-face {
	font-family: "Gotham";
	src: url("../fonts/Gotham-Book.woff2") format("woff2"),
		url("../fonts/Gotham-Book.woff") format("woff");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

/* Hugo's css here */
.flex-normal-content {
	display: flex;
}

.storyline {
	justify-content: space-evenly;
	width: 100%;
}

.storyline .img-container {
	width: 30%;
	cursor: pointer;
}

.storyline img {
	width: 100%;
}

.storyline .img-container:hover img {
	transform: scale(1.05);
}

.storyline .focus-img img {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 50vw;
	transform: scale(1.05);
}

.focus-img::before {
	content: "";
	background-color: rgba(0, 0, 0, 0.8);
	position: fixed;
	width: 100vw;
	height: 100vh;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}

.focus-img::after {
	content: "X";
	position: fixed;
	right: 20%;
	top: 20%;
	color: white;
	font-weight: 900;
}

@media only screen and (min-width: 350px) and (max-width: 910px) {
	.storyline {
		flex-direction: column;
		width: 90vw;
		gap: 1rem;
	}

	.storyline .img-container {
		width: 100%;
	}
}