.content {
	display: grid;
	grid-template-areas:
		"title"
		"head"
		"main";
	gap: 20px;
}

.content h1 {
	grid-area: title;
	text-align: center;
	text-transform: uppercase;
	color: var(--page-title-accent);
	font-family: 'Bebas Neue', cursive;
	font-size: 48pt;
	font-weight: 400;
	margin: 10px 0 0
}

.blocks {
	display: grid;
	gap: 20px;
}

#head-blocks {
	grid-area: head;
	grid-auto-columns: repeat(2, 1fr);
}

#main-blocks {
	grid-area: main;
	grid-template-columns: repeat(4, 1fr);
}

.content img {
	width: 100%;
}

.content p {
	margin: 0;
	text-align: justify;
}

.head-text {
	grid-column: 1;
	padding: 20px;
	color: white;
}

.head-image {
	grid-column: 2;
}

.content h2, .content h3 {
	text-align: center;
	text-transform: uppercase;
	color: var(--page-heading-accent);
}

.content h2 {
	font-size: 24pt;
	margin: 0 0 10px;
}

.cta {
	margin-top: 20px;
	text-align: center;
}

.btn-round {
	background-color: var(--page-cta-accent);
	border-radius: 20px;
}

@media (max-width: 992px) {
	#head-blocks {
		grid-auto-columns: 1fr;
	}
	.head-image {
		grid-column: 1;
	}
	#main-blocks {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	#main-blocks {
		grid-template-columns: 1fr;
	}
}