example-code/styles/mysite-sass/home.scss

@use "sass:map";
@use "sass:color";
@use "vars/vars";
@use "partials/effects";
@use "partials/navigator";

header.home {
	margin: 5vh auto 0 auto;
	max-width: 60rem;
	display: block;
	height: auto;
	background-color: transparent;
	h1.logo {
		font-size: 3em;
		font-family:'EBGaramond-initials2', 'EBGaramond';
		margin: auto;
		text-align: center;
		width: inherit;
		position: relative;
		top: 50px;
	}
	.nav-container {
	}
	nav {
		background-color: vars.getColor('light-grey');
		margin-top: 20%;
		max-width: 100%;
		min-height: 2em;
	}
}
.home div.hero {
	background-color: vars.getColor('primary');
	margin: 0 25px;
	height: 30rem;
	border-radius: 5px;
	box-shadow: 8px 14px 38px rgba(39,44,49,.1), 1px 3px 8px rgba(39,44,49,.06); 
}

.hero img {
	display: block;
	width: 70px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 50px;
}

.home .nav-item {
	min-height: 2em;
}