:root {
	--logo-width: 75;
}

@media only screen and (max-width: 735px) {
	:root {
		--logo-width: 100;
	}
}

html,
body {
	max-width: 100%;
	overflow-x: hidden;
}

main {
	background: #000;
}

.section-hero .typography-intro {
	color: #ffffff;
}

@media only screen and (max-width: 735px) {
	.section-hero .section-content {
		width: 100%;
	}
}

.image-hero-wrapper {
	position: relative;
	height: 0;
	/* using variable if need smaller than 100% width */
	padding-top: calc((2030 / 3342 * 100%) * (var(--logo-width) / 100));
	display: grid;
	place-items: center;
}

@media only screen and (max-width: 735px) {
	.image-hero-wrapper {
		/* using variable if need smaller than 100% width */
		padding-top: calc((1200 / 1602 * 100%) * (var(--logo-width) / 100));

	}
}

.ssc-logo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	max-width: 100%;
	height: auto;
	width: calc(var(--logo-width) * 1%);
}

/* global style override */
.theme-dark .button a {
	color: #fff;
}
.theme-dark .button:hover a {
	text-decoration: none;
}