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

@use "sass:map";
@use "sass:color";

@use "vars/vars";
@use "partials/effects";

.web.hero {
	height: max(50vh, 20em);
	width: 100%;
	background-image: url('image/pexels-charles-parker-5845527(v2).jpg');
	background-size: cover;
	background-attachment: fixed;
	background-position: center;
}

.web .filter {
	position: relative;
	height: 100%;
	width: 100%;
	background-color: rgba(0, 0, 0, 0.3);
}

.web .heading {
	color: white;
	position: relative;
	top: 20%;
	left: 20%;
	margin: 0 auto 0 auto;
	max-width: min(25rem, 100%);
}

.web .heading p {
	color: white;
}

.web .frameworks {
	display: flex;
	flex-flow: row wrap;
}

.frameworks .card {
	flex: 2 200px;
	margin: 0 10px;
	text-align: center;
}

.frameworks img {
	margin: 0 auto;
	display: block;
	height: 50px;
}
.frameworks h2 {
	width: 100%;
	text-align: center;
}

.web .content {
	display: flex;
	flex-flow: row wrap;
}

.web .points {
	flex: 1;
}

.web .info {
	flex: 1;
}

.points img {
	height: 30px;
	transform: translateY(10px);
	margin-right: 5px;
}

.points p {
	display: inline-block;
}

.content .info {
	margin-left: 10px;
}

.process {
	padding-bottom: 4em;
}

.process h2 {
	text-align: center;
}

.process ol {
	font-size: 1.3rem;
	max-width: 20em;
	margin: 0 auto;
}

.process li {
	margin: 1em 0;
	color: map.get(vars.$theme-colors, 'p');
}

.process li b {
	color: black;
}

.process .end {
	display: inline-block;
	position: relative;
	margin: 3em auto 0 auto;
	width: 10em;
}

.process .btn-grey {
	display: block;
	margin: 4em auto 0 auto;
	max-width: 5em;
	text-align: center;
}

#utilities a {
	text-decoration: none;
	color: vars.getColor('link-grey')
}

#utilities h4 {
	margin-left: 2em;
	text-decoration: none;
	color: vars.getColor('link-grey')
}

#utilities h4::before {
	content: "\00BB",
}

#utilities h4:hover {
	color: black;
}

@media (max-width: 720px) {
	.web .heading {
		max-width: 100%;
		left: 0;
		margin-left: 5px;
		margin-right: 5px;
	}
}

.web .content h4 {
	display: inline-block;
}