website/public/assets/css/pages/why.css

/* # Sections */

/* ## Title */

section.title {
	color: white;
	padding: calc(var(--padding) * 2) 0;
	align-items: center;
	background-color: var(--color-deep);
}

section.title container {
	display: flex;
	gap: 50px;
}

section.title svg {
	height: 150px;
}

section.title container > div {
	display: flex;
	flex-direction: column;
	gap: var(--padding);
}

section.title h1 span {
	text-decoration: underline;
}

section.title h2 {
	background-color: black;
}

/* ## Text */

section.text {
	min-height: 400px;
	padding: calc(var(--padding) * 2) 0;
}

section.text h2 {
	color: white;
	background-color: black;
}

/* ## Free */

section#free {
	background-position: 50% 50%;
	background-size: 400px;
	background-color: red;
	background-blend-mode: lighten;
	background-image: url("/assets/media/gnu.png");
}

section#free svg {
	filter: drop-shadow(0 0 40px rgba(255, 255, 255, .3));
}