#mural {
	background-image: url("/static/main_app/img/mural.png");
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: top 40% right 0%;
	height: 35rem;

	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	justify-content: flex-end;
}

#slogan {
	font-size: 3rem;

	text-align: center;

	color: white;
	text-shadow: 0.2rem 0.2rem 4px black;

	margin-bottom: 2rem;
}

#mural > .overlay {
	background-color: rgb(105, 20, 10, 0.9);

	padding: 1rem 3rem;
}

#mural > .overlay .text {
	color: white;

	font-size: 1.2rem;

	text-align: center;
}

#info-box {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: space-around;

	width: 100%;

	padding: 1rem 0;
}

#map {
	width: 40rem;
	height: 20rem;
	border: 1px solid var(--color-red);
}

#info-box #info-list {
	display: flex;
	flex-flow: column nowrap;

	row-gap: 1.5rem;

	color: var(--color-red);
}

#info-box #info-list .title {
	font-size: 2rem;
}

#info-box #info-list .data {
	height: 2.5rem;

	width: min-content;

	white-space: nowrap;
}

#info-box #info-list .data span {
	font-size: 1.8rem;
}

#info-box #info-list .data .icon {
	width: 2.5rem;
}

#info-box #info-list .data .icon img {
	filter: brightness(0) saturate(100%) invert(14%) sepia(47%) saturate(3002%) hue-rotate(346deg) brightness(92%) contrast(103%);
}


#latest-events {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;

	column-gap: 2vw;

	padding: 1rem;
}

@media screen and (width < 1140px) {
	#mural {
		background-image: url("/static/main_app/img/mural_mobile.png");
		background-size: cover;
		background-position: center;

		height: calc(min-content + 10vh);
	}

	#slogan {
		font-size: 2rem;

		margin-bottom: 1rem;
	}

	#mural > .overlay {
		padding: 1rem 1.5rem;
	}

	#mural > .overlay .text {
		font-size: 1rem;

		text-align: left;
	}

	#info-box {
		flex-flow: column nowrap;

		row-gap: 1rem;
	}

	#info-list {
		text-align: center;
	}

	#info-box #info-list .data {
		height: auto;

		width: 100%;

		white-space: wrap;
	}

	.info {
		display: flex;
		flex-flow: column nowrap;
		justify-content: flex-start;
		align-items: center;
	}

	#map {
		order: 2;

		width: 100%;

		height: 20rem;
	}

	#latest-events {
		flex-flow: column nowrap;

		row-gap: 1rem;
	}
}