.hero {
	background-image: url(../../images/hero/default/portrait-480.png);
	background-position: center center;
	height: 280px;
	left: -10px;
	margin-bottom: 20px;
	position: relative;
	width: calc(100% + 20px);
}

.active-hero {
	cursor: pointer;
}

.hero-text {
	bottom: 8%;
	font-family: Helvetica, sans-serif;
	left: 10px;
	letter-spacing: .05em;
	max-width: 40%;
	position: absolute;
	text-transform: uppercase;
}

.hero-text .s,
#upcoming-event-title,
#upcoming-event-time,
#upcoming-event-admission,
#upcoming-event-venue {
	background-color: Black;
}

#upcoming-event-title,
#upcoming-event-time,
#upcoming-event-admission {
	margin-bottom: 5px;
}

#upcoming-event-title {
	color: White;
	font-size: 20px;
	font-weight: normal;
}

#upcoming-event-time {
	color: SkyBlue;
	font-size: 11px;
}

#upcoming-event-admission {
	color: Yellow;
	font-size: 11px;
}

#upcoming-event-venue {
	color: Pink;
	font-size: 11px;
}

@media (min-width: 480px) {
	.hero {
		background-image: url(../../images/hero/default/portrait-640.png);
		height: 380px;
		left: 0;
		width: 100%;
	}

	#upcoming-event-title {
		font-size: 5.7vw; /* 50 / 880, etc. */
	}

	#upcoming-event-time {
		font-size: 3.6vw;
	}

	#upcoming-event-admission {
		font-size: 1.8vw;
	}

	#upcoming-event-venue {
		font-size: 2.3vw;
	}
}

@media (min-width: 640px) {
	.hero {
		background-image: url(../../images/hero/default/portrait-880.png);
		height: 520px;
	}
}

@media (min-width: 880px) {
	.hero {
		background-image: url(../../images/hero/default/portrait.png);
		height: 600px;
	}
	#upcoming-event-title {
		font-size: 50px;
	}

	#upcoming-event-time {
		font-size: 32px;
	}

	#upcoming-event-admission {
		font-size: 16px;
	}

	#upcoming-event-venue {
		font-size: 20px;
	}
}

@media (-webkit-min-device-pixel-ratio: 2) {
	.hero {
		background-image: url(../../images/hero/default/portrait-480@2x.png);
		background-size: 480px 480px;
	}
}

@media (-webkit-min-device-pixel-ratio: 2) and (min-width: 480px) {
	.hero {
		background-image: url(../../images/hero/default/portrait-640@2x.png);
		background-size: 640px 640px;
	}
}

@media (-webkit-min-device-pixel-ratio: 2) and (min-width: 640px) {
	.hero {
		background-image: url(../../images/hero/default/portrait-880@2x.png);
		background-size: 880px 880px;
	}
}

@media (-webkit-min-device-pixel-ratio: 2) and (min-width: 880px) {
	.hero {
		background-image: url(../../images/hero/default/portrait@2x.png);
		background-size: 1024px 1024px;
	}
}

@media (prefers-color-scheme: dark) {
	.hero {
		mix-blend-mode: screen;
		opacity: .9;
	}
}