body.homepage {
	header {
		justify-content: space-between;
	}

	.hero {
		background-position: left -100px bottom;
		background-repeat: no-repeat;
		background-size: auto 80%;
		height: 90vh;
		max-height: 800px;
		position: relative;
		
		aside {
			display: none;
			padding: 1rem;

			img {
				margin-top: 2rem;
			}

			p {
				color: var(--dark-blue);
				font-size: 1.2rem;

				strong {
					color: gray;
					display: block;
					font-style: italic;
					font-weight: bold;
				}
			}
		}
	}

	#event-carousel {
		background-color: rgba(var(--dark-blue-rgb), 0.85);
		color: white;
		font-family: 'Fira Sans Extra Condensed', sans-serif;
		padding: 1rem 0;
		position: absolute;
		right: 0; bottom: 0; left: 0;
		width: 100%;

		h2 {
			font-size: 1.4rem;
			font-weight: bold;
		}

		p {
			font-family: 'Fira Sans', sans-serif;
			font-size: 1.1rem;
			margin-bottom: .25rem;
		}

		.performers-text {
			max-height: 1.5rem;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

		.img-btn {
			display: inline-block;
			width: 160px;
			max-width: 100%;
		}
	}

@media (min-width: 600px) {
	.hero {
		background-position: left bottom;

		#event-carousel {
			h2 {
				font-size: 2rem;
			}
		}
	}
}

@media (min-width: 768px) {
	header {
		grid-template-columns: auto auto;
		justify-content: flex-end;
		padding-top: 1rem;
		padding-bottom: 1rem;

		#logo, aside {
			display: none;
		}
	}

	.hero {
		background-position: right -300px bottom;

		aside {
			display: inline-block;

			img {
				margin-bottom: 1rem;
				width: 450px;
			}

			p {
				strong {
					margin-bottom: 1rem;
				}
			}
		}

		#event-carousel {
			padding: 2rem 0;

			.btn {
				width: auto !important;
			}
		}
	}
}

@media (min-width: 1024px) {
	.hero {
		background-position: right -150px bottom;
		background-size: auto 90%;
		max-height: 650px;

		aside {

			img {
				width: 475px;
			}
			p {
				font-size: 1.5rem;
				padding-left: 8rem;
			}
		}

		#event-carousel {
			h2 {
				white-space: nowrap;
			}
		}
	}
}

@media (min-width: 1200px) {
	.hero {
		background-position: right -50px bottom;
		max-height: 700px;

		aside {
			img {
				width: 520px;
			}
		}
	}
}

@media (min-width: 1400px) {
	.hero {
		background-position: right 100px bottom;
	}
}

@media (min-width: 1600px) {
	.hero {
		background-position: right 150px bottom;
	}
}

@media (min-width: 1750px) {
	.hero {
		background-position: left 70% bottom;
	}
}

@media (orientation: landscape) and (max-height: 500px) {
	.hero {
		background-position: right -75px bottom 50px;
		height: calc(100vh + 140px);

		aside {
			img {
				width: 275px;
			}
		}
	}
}
}