main {
	display: grid;
	grid-template-areas:
		"column1 column2 column3"
		"footer footer footer";
	grid-template-columns: 1fr 2.5fr 1fr;
}

wrapper.column1,
wrapper.column3 {
	section {
		margin: 20px 0;
		padding: 10px;
		color: var(--main);
		background: var(--comp3);
	}
	a {
		color: var(--primary1);
	}
}

wrapper.column1 {
	grid-area: column1;
}

wrapper.column2 {
	grid-area: column2;
	section {
		margin: 20px 0;
	}

	h2 {
		text-align: left;
	}

	#faq {
		h3 {
			color: var(--accent2);
		}
		p {
			padding-left: 15px;
		}
	}
}

wrapper.column3 {
	grid-area: column3;
	text-align: right;
	a.title {
		font-style: italic;
		font-size: 1.1em;
	}
	h3 {
		text-shadow: 3px 3px 1px var(--accent2);
		font-family: poppins-black;
		font-size: 1.4em;
		letter-spacing: 1px;
		font-weight: bold;
		color: var(--comp1);
	}
	ol li {
		list-style-type: decimal-leading-zero;
		list-style-position: outside;
		border-bottom: 1px dashed var(--primary2);
		&::marker {
			color: var(--primary1);
		}
	}
}

wrapper.column1,
wrapper.column2,
wrapper.column3 {
	padding: 10px 15px;
}

/* mobile view */
@media screen and (max-width: 600px) {
	main {
		grid-template-areas:
			"column1 column3"
			"column2 column2"
			"footer footer";
		grid-template-columns: 1fr 1fr;
	}
}