main {
	grid-area: main;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	grid-template-areas: "about-section";
}

.about-section {
	grid-area: about-section;
	background-color: var(--main-bg-colour);

	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows:
		minmax(40em, auto)
		minmax(30em, auto)
		auto
		auto
		auto
		auto
		minmax(60em, auto)
		auto
		minmax(40em, auto)
		minmax(40em, auto)
		minmax(60em, auto);
	grid-template-areas:
		"about-container-1"
		"about-container-2"
		"about-container-3"
		"about-container-4"
		"about-container-5"
		"about-container-6"
		"about-container-7"
		"about-container-9"
		"about-container-10"
		"about-container-11"
		"about-container-12";
}
/* *********************** */
.about-section h2 {
	font-size: var(--h2-font-size);
	font-family: var(--font-family-h2);
	text-align: center;
	margin-bottom: 1.5em;
	line-height: var(--line-height);
}

.about-section h3 {
	font-size: var(--h3-font-size);
	font-family: var(--font-family-h3);
	line-height: var(--line-height);
	text-align: center;
	margin-bottom: 1.5em;
}

.about-section p {
	font-size: var(--p-font-size);
	font-family: var(--font-family-p);
	line-height: var(--line-height);
	color: var(--font-colour-dark);
	text-align: center;
	margin-bottom: 1em;
}

/* *********************** */
.about-container-1 {
	grid-area: about-container-1;
	background-color: var(--heading-bg-colour);
	display: flex;
	justify-content: center;
	align-items: center;
	padding: var(--p-lg-padding);
}

.about-container-1 h2 {
	margin-bottom: 0;
	color: var(--font-colour-light);
	text-align: center;
	line-height: var(--line-height);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

/* *********************** */

.about-container-2 {
	grid-area: about-container-2;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: minmax(60em, auto) auto;
	grid-template-areas:
		"about-container-2-1"
		"about-container-2-2";
}

.about-container-2-1 {
	grid-area: about-container-2-1;
	background-color: var(--content-bg-colour);
	display: flex;
	justify-content: center;
	align-items: center;
	padding: var(--p-lg-padding);
}

.about-container-2-1 p {
	max-width: var(--p-lg);
}

.about-container-2-2 {
	grid-area: about-container-2-2;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: minmax(80em, auto);
	grid-template-areas: "about-container-2-2-img about-container-2-2-info";
	border-top: var(--border-styles-2);
	border-bottom: var(--border-styles-2);
}

.about-container-2-2-img {
	grid-area: about-container-2-2-img;
	background-color: var(--content-bg-colour);
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 1em;
}

.about-container-2-2-img img {
	max-width: 80em;
	max-height: 80em;
	object-fit: cover;
	object-position: center;
}

.about-container-2-2-info {
	grid-area: about-container-2-2-info;
	background-color: var(--heading-bg-colour);
	display: flex;
	justify-content: center;
	align-items: center;
	padding: var(--p-sm-padding);
}

.about-container-2-2-info p {
	max-width: 41em;
	color: var(--font-colour-light);
}

/* *********************** */
.about-container-3 {
	grid-area: about-container-3;
	background-color: var(--main-bg-colour);
	display: grid;
	grid-template-columns: minmax(auto, 150em);
	grid-template-rows:
		minmax(50em, auto)
		minmax(50em, auto)
		minmax(50em, auto)
		minmax(50em, auto)
		minmax(50em, auto);
	grid-template-areas:
		"about-container-3-img-1"
		"about-container-3-card-1"
		"about-container-3-card-2"
		"about-container-3-card-3"
		"about-container-3-card-4";
	justify-content: center;
	align-content: center;
	gap: 5em;
	padding: var(--p-lg-padding);
}

.about-container-3 p {
	width: var(--p-sm);
	text-align: left;
}

.about-container-3-img-1 {
	grid-area: about-container-3-img-1;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 5em;
}

.about-container-3-img {
	max-width: 60em;
}

.about-container-3-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	border-radius: 50%;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
}

.about-container-3-card-1 {
	grid-area: about-container-3-card-1;
	background-color: var(--content-bg-colour);
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
	padding: var(--p-sm-padding);
}
.about-container-3-card-2 {
	grid-area: about-container-3-card-2;
	background-color: var(--heading-bg-colour);
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
	padding: var(--p-sm-padding);
	border-radius: 20px;
}

.about-container-3-card-2 p {
	color: var(--font-colour-light);
	text-align: center;
	max-width: 43em;
}

.about-container-3-card-3 {
	grid-area: about-container-3-card-3;
	background-color: var(--content-bg-colour);
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
	padding: var(--p-sm-padding);
}

.about-container-3-card-4 {
	grid-area: about-container-3-card-4;
	background-color: var(--heading-bg-colour);
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
	padding: var(--p-sm-padding);
	border-radius: 20px;
}

.about-container-3-card-4 p {
	color: var(--font-colour-light);
	text-align: center;
}

/* *********************** */
.about-container-4 {
	grid-area: about-container-4;
	background-color: lightblue;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: minmax(60em, auto);
	grid-template-areas: "about-container-4-info";
}

.about-container-4-info {
	grid-area: about-container-4-info;
	background-color: var(--content-bg-colour);
	display: flex;
	justify-content: center;
	align-items: center;
	padding: var(--p-lg-padding);
}

.about-container-4 p {
	max-width: var(--p-lg);
	text-align: left;
}

/* *********************** */
.about-container-5 {
	grid-area: about-container-5;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows:
		minmax(40em, auto)
		auto
		auto;
	grid-template-areas:
		"about-container-5-1"
		"about-container-5-2"
		"about-container-5-3";
}

.about-container-5-1 {
	grid-area: about-container-5-1;
	background-color: var(--heading-bg-colour);
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	padding: var(--p-lg-padding);
}

.about-container-5-1 h2 {
	color: var(--font-colour-light);
	margin: 0;
}

.about-container-5-2 {
	grid-area: about-container-5-2;
	display: grid;
	grid-template-columns: 1fr 2fr;
	grid-template-rows: minmax(60em, auto);
	grid-template-areas: "about-container-5-2-img about-container-5-2-info";
}

.about-container-5 p {
	max-width: 50em;
	text-align: left;
}

.about-container-5-2-img {
	grid-area: about-container-5-2-img;
	background-color: lightsteelblue;
}

.about-container-5-2-img img,
.about-container-5-3-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.about-container-5-2-info {
	grid-area: about-container-5-2-info;
	background-color: var(--content-bg-colour);
	display: flex;
	justify-content: center;
	align-items: center;
	padding: var(--p-sm-padding);
}

.about-container-5-3 {
	grid-area: about-container-5-3;
	display: grid;
	grid-template-columns: 2fr 1fr;
	grid-template-rows: minmax(60em, auto);
	grid-template-areas: "about-container-5-3-info about-container-5-3-img";
}

.about-container-5-3-img {
	grid-area: about-container-5-3-img;
	background-color: lightseagreen;
}
.about-container-5-3-info {
	grid-area: about-container-5-3-info;
	background-color: var(--content-contrast-bg-colour);
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	padding: var(--p-sm-padding);
}

/* *********************** */
.about-container-6 {
	grid-area: about-container-6;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows:
		minmax(50em, auto)
		minmax(60em, auto)
		minmax(50em, auto)
		minmax(60em, auto)
		minmax(60em, auto)
		minmax(60em, auto)
		minmax(60em, auto);
	grid-template-areas:
		"about-container-6-1"
		"about-container-6-2"
		"about-container-6-3"
		"about-container-6-4"
		"about-container-6-5"
		"about-container-6-6"
		"about-container-6-7";
}

.about-container-6 h2 {
	margin: 0;
	color: var(--font-colour-light);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

.about-container-6 p {
	max-width: 50em;
	text-align: left;
}

.about-container-6-1 {
	grid-area: about-container-6-1;
	background-color: var(--heading-bg-colour);
	display: flex;
	justify-content: center;
	align-items: center;
	padding: var(--p-lg-padding);
}

.about-container-6-2 {
	grid-area: about-container-6-2;
	background-color: var(--content-bg-colour);
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	padding: var(--p-lg-padding);
}
.about-container-6-3 {
	grid-area: about-container-6-3;
	background-color: var(--heading-bg-colour);
	display: flex;
	justify-content: center;
	align-items: center;
	padding: var(--p-lg-padding);
}

.about-container-6-4 {
	grid-area: about-container-6-4;
	background-color: var(--content-bg-colour);
	display: flex;
	justify-content: center;
	align-items: center;
	padding: var(--p-lg-padding);
}
.about-container-6-5 {
	grid-area: about-container-6-5;
	background-color: var(--content-contrast-bg-colour);
	display: flex;
	justify-content: center;
	align-items: center;
	padding: var(--p-lg-padding);
	box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
}
.about-container-6-6 {
	grid-area: about-container-6-6;
	background-color: var(--content-bg-colour);
	display: flex;
	justify-content: center;
	align-items: center;
	padding: var(--p-lg-padding);
}
.about-container-6-7 {
	grid-area: about-container-6-7;
	background-color: var(--content-contrast-bg-colour);
	display: flex;
	justify-content: center;
	align-items: center;
	padding: var(--p-lg-padding);
	box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
}

/* *********************** */
.about-container-7 {
	grid-area: about-container-7;
	display: grid;
	grid-template-columns: minmax(auto, 130em);
	grid-template-rows: minmax(60em, auto);
	grid-template-areas: "about-container-7-card-1";
	justify-content: center;
	align-content: center;
	padding: 5em 1em;
	background-color: var(--heading-bg-colour);
}

.about-container-7-card-1 {
	grid-area: about-container-7-card-1;
	background-color: var(--content-bg-colour);
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 20px;
	padding: var(--p-sm-padding);
}

.about-container-7-card-1 p {
	width: var(--p-sm);
}

/* *********************** */

/* *********************** */
.about-container-9 {
	grid-area: about-container-9;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows:
		minmax(80em, auto)
		minmax(80em, auto)
		minmax(80em, auto);
	grid-template-areas:
		"about-container-9-card-1"
		"about-container-9-card-2"
		"about-container-9-card-3";
}

.about-container-9 p {
	max-width: 50em;
	text-align: left;
}

.about-container-9-card-1 {
	grid-area: about-container-9-card-1;
	background-color: var(--content-bg-colour);
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	padding: var(--p-lg-padding);
}
.about-container-9-card-2 {
	grid-area: about-container-9-card-2;
	background-color: var(--content-contrast-bg-colour);
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	padding: var(--p-lg-padding);
}
.about-container-9-card-3 {
	grid-area: about-container-9-card-3;
	background-color: var(--content-bg-colour);
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	padding: var(--p-lg-padding);
}

.about-container-9-card-img {
	width: 30em;
	height: 30em;
	border-radius: 50%;
	background-color: blueviolet;
	margin-bottom: 5em;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
}

.about-container-9-card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	border-radius: 50%;
}

/* *********************** */
.about-container-10 {
	grid-area: about-container-10;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows:
		auto
		auto;
	grid-template-areas:
		"about-container-10-1"
		"about-container-10-2";
}

.about-container-10-1 {
	grid-area: about-container-10-1;
	display: grid;
	grid-template-columns: 1fr 2fr;
	grid-template-rows: minmax(60em, auto);
	grid-template-areas: "about-container-10-1-img about-container-10-1-info";
}

.about-container-10-1-img {
	grid-area: about-container-10-1-img;
	background-color: red;
}

.about-container-10-1-img img,
.about-container-10-2-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.about-container-10-1-info {
	grid-area: about-container-10-1-info;
	background-color: var(--content-contrast-bg-colour);
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	padding: var(--p-sm-padding);
}

.about-container-10-2 {
	grid-area: about-container-10-2;
	display: grid;
	grid-template-columns: 2fr 1fr;
	grid-template-rows: minmax(60em, auto);
	grid-template-areas: "about-container-10-2-info about-container-10-2-img";
}

.about-container-10-2-img {
	grid-area: about-container-10-2-img;
	background-color: rgb(0, 255, 26);
}
.about-container-10-2-info {
	grid-area: about-container-10-2-info;
	background-color: var(--content-bg-colour);
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	padding: var(--p-sm-padding);
}

.about-container-10-2-info p,
.about-container-10-1-info p {
	width: var(--p-sm);
	text-align: left;
}

/* *********************** */
.about-container-11 {
	grid-area: about-container-11;
	background-color: var(--main-bg-colour);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.about-container-11-img {
	max-width: 60em;
	max-height: 60em;
	background-color: var(--logo-bg-colour);
	border-radius: 50%;
	border: var(--border-styles-1);
	margin: 5em 1em;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
}

.about-container-11-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	border-radius: 50%;
}

/* *********************** */
.about-container-12 {
	grid-area: about-container-12;
	background-color: var(--heading-bg-colour);
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	padding: var(--p-lg-padding);
}

.about-container-12 p {
	color: var(--font-colour-light);
	max-width: var(--p-lg);
	text-align: left;
}

@media (max-width: 1440px) {
	/* *********************** */
	.about-section h2 {
		font-size: var(--mq-h2-font-size);
	}

	.about-section h3 {
		font-size: var(--mq-h3-font-size);
	}

	.about-section p {
		font-size: var(--mq-p-font-size);
	}

	/* *********************** */

	.about-section {
		grid-area: about-section;
		background-color: var(--main-bg-colour);

		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows:
			minmax(30em, auto)
			minmax(30em, auto)
			auto
			auto
			auto
			auto
			minmax(60em, auto)
			auto
			minmax(40em, auto)
			minmax(40em, auto)
			minmax(50em, auto);
		grid-template-areas:
			"about-container-1"
			"about-container-2"
			"about-container-3"
			"about-container-4"
			"about-container-5"
			"about-container-6"
			"about-container-7"
			"about-container-9"
			"about-container-10"
			"about-container-11"
			"about-container-12";
	}

	.about-container-2 {
		grid-area: about-container-2;
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: minmax(40em, auto) auto;
		grid-template-areas:
			"about-container-2-1"
			"about-container-2-2";
	}

	.about-container-2-2 {
		grid-template-rows: minmax(50em, auto);
	}

	.about-container-2-2-img img {
		max-width: 50em;
		max-height: 50em;
	}

	.about-container-2-2-info p {
		max-width: var(--p-sm);
		color: var(--font-colour-light);
	}

	/* *********************** */
	.about-container-3 {
		grid-area: about-container-3;
		background-color: var(--main-bg-colour);
		display: grid;
		grid-template-columns: minmax(auto, 100em);
		grid-template-rows:
			auto
			minmax(30em, auto)
			minmax(30em, auto)
			minmax(30em, auto)
			minmax(30em, auto);
		grid-template-areas:
			"about-container-3-img-1"
			"about-container-3-card-1"
			"about-container-3-card-2"
			"about-container-3-card-3"
			"about-container-3-card-4";
		justify-content: center;
		align-content: center;
		gap: 3em;
		padding: 1em;
		margin-bottom: 3em;
	}

	.about-container-3-img-1 {
		margin: 3em;
	}

	.about-container-3-img {
		max-width: 50em;
	}

	/* *********************** */
	.about-container-4 {
		grid-area: about-container-4;
		background-color: lightblue;
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: minmax(40em, auto);
		grid-template-areas: "about-container-4-info";
	}

	/* *********************** */
	.about-container-5 {
		grid-area: about-container-5;
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows:
			minmax(30em, auto)
			auto
			auto;
		grid-template-areas:
			"about-container-5-1"
			"about-container-5-2"
			"about-container-5-3";
	}

	.about-container-5-2 {
		grid-area: about-container-5-2;
		display: grid;
		grid-template-columns: 1fr 2fr;
		grid-template-rows: minmax(60em, auto);
		grid-template-areas: "about-container-5-2-img about-container-5-2-info";
	}

	.about-container-5 p {
		width: var(--p-sm);
		text-align: left;
	}

	/* *********************** */
	.about-container-6 {
		grid-area: about-container-6;
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows:
			minmax(30em, auto)
			minmax(50em, auto)
			minmax(30em, auto)
			minmax(50em, auto)
			minmax(50em, auto)
			minmax(50em, auto)
			minmax(50em, auto);
		grid-template-areas:
			"about-container-6-1"
			"about-container-6-2"
			"about-container-6-3"
			"about-container-6-4"
			"about-container-6-5"
			"about-container-6-6"
			"about-container-6-7";
	}

	.about-container-6-4 p {
		max-width: 35em;
		text-align: left;
	}

	/* *********************** */
	.about-container-7 {
		grid-area: about-container-7;
		display: grid;
		grid-template-columns: minmax(auto, 100em);
		grid-template-rows: minmax(50em, auto);
		grid-template-areas: "about-container-7-card-1";
		justify-content: center;
		align-content: center;
		padding: 5em 1em;
		background-color: var(--heading-bg-colour);
	}
	/* *********************** */
	.about-container-9 {
		grid-area: about-container-9;
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows:
			minmax(50em, auto)
			minmax(50em, auto)
			minmax(50em, auto);
		grid-template-areas:
			"about-container-9-card-1"
			"about-container-9-card-2"
			"about-container-9-card-3";
	}

	.about-container-9-card-img {
		width: 17em;
		height: 17em;
		border-radius: 50%;
		background-color: blueviolet;
		margin-bottom: 5em;
		box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
	}
	/* *********************** */
	.about-container-11-img {
		max-width: 50em;
		max-height: 50em;
		background-color: var(--logo-bg-colour);
		border-radius: 50%;
		border: var(--border-styles-1);
		margin: 5em 1em;
		box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
	}
}

@media (max-width: 1024px) {
	.about-container-5-2 {
		grid-area: about-container-5-2;
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: minmax(60em, auto);
		grid-template-areas: "about-container-5-2-img about-container-5-2-info";
	}

	.about-container-5-3 {
		grid-area: about-container-5-3;
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: minmax(60em, auto);
		grid-template-areas: "about-container-5-3-info about-container-5-3-img";
	}

	.about-container-2-1 p,
	.about-container-6 p,
	.about-container-9 p,
	.about-container-12 p,
	.about-container-4 p {
		max-width: 45em;
	}
}

@media (max-width: 768px) {
	.about-container-2-2 {
		grid-area: about-container-2-2;
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto minmax(30em, auto);
		grid-template-areas: "about-container-2-2-img" "about-container-2-2-info";
		border-top: var(--border-styles-2);
		border-bottom: var(--border-styles-2);
	}

	.about-container-5-2 {
		grid-area: about-container-5-2;
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: minmax(50em, auto) minmax(60em, auto);
		grid-template-areas: "about-container-5-2-img" "about-container-5-2-info";
	}

	.about-container-5-3 {
		grid-area: about-container-5-3;
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: minmax(60em, auto) minmax(50em, auto);
		grid-template-areas: "about-container-5-3-info" "about-container-5-3-img";
	}

	.about-container-10-1 {
		grid-area: about-container-10-1;
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows:
			minmax(50em, auto)
			minmax(60em, auto);
		grid-template-areas: "about-container-10-1-img" "about-container-10-1-info";
	}

	.about-container-10-2 {
		grid-area: about-container-10-2;
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows:
			minmax(50em, auto)
			minmax(60em, auto);
		grid-template-areas: "about-container-10-2-img" "about-container-10-2-info";
	}

	.about-container-2-2-img img {
		width: 100%;
		height: 100%;
	}
}

@media (max-width: 425px) {
	.about-section p {
		text-align: left;
	}

	.about-container-3 {
		grid-area: about-container-3;
		background-color: var(--main-bg-colour);
		display: grid;
		grid-template-columns: minmax(auto, 100em);
		grid-template-rows:
			minmax(50em, auto)
			minmax(30em, auto)
			minmax(30em, auto)
			minmax(50em, auto)
			minmax(30em, auto);
		grid-template-areas:
			"about-container-3-img-1"
			"about-container-3-card-1"
			"about-container-3-card-2"
			"about-container-3-card-3"
			"about-container-3-card-4";
		justify-content: center;
		align-content: center;
		gap: 3em;
		padding: 5em 1em;
	}
}