.page-template-page-home {
	#main-content-wrapper {
		margin-inline: 0;
	}

	.section-wrapper {
		overflow: hidden;

		> section {
			background-repeat: no-repeat;
			background-position: 30% bottom;
		}
	}

	.text-content {
		padding-inline: var(--padding-rl);
	}

	.section-heading {
		font-weight: 900;
		color: var(--clr-link);
		line-height: 1.2;
		margin-block: 0;
	}

	.section-sub-heading {
		font-weight: 500;
		font-size: 2.25rem;
		color: var(--clr-gray-light-2);
		margin-block: 0.8em;
	}

	.description {
		p {
			font-size: 0.9375rem;
			line-height: 1.8;
			hyphens: none;
		}
	}

	.button {
		font-weight: 700;
		font-size: 1.125rem;
		padding: 0.6em 3.3em;
		margin-top: 0.875rem;
	}

	.heading-section {
		display: grid;
		justify-items: center;
		width: 100%;
		padding-block: 1.875rem 0;

		.section-content {
			display: grid;
			width: 100%;
			max-width: 21.9rem;
			isolation: isolate;
			position: relative;
			padding-bottom: 13.5rem;
		}

		.text-content  {
			display: grid;
			align-content: start;
			justify-self: center;
		}

		.section-heading {
			font-size: 4.5rem;
			line-height: 1;

			small {
				font-weight: 300;
				font-size: 3rem;
			}
		}

		figure {
			overflow: hidden;
			position: absolute;
			bottom: 0;
			right: -10%;
			z-index: -1;

			img {
				width: 12rem;
				max-width: unset;
			}
		}

		.button {
			justify-self: left;
			margin-bottom: 0;
		}

		@media (width < 56.25rem) { /* 900px */
			.description p::before {
				content: '';
				float: right;
				width: 110px;
				height: 170px;
				shape-outside: content-box;
				margin-top: 90px;
			}
		}

		@media (width >= 56.25rem) { /* 900px */
			& {
				padding-top: 4.375rem;
				background-position: center bottom;

				.section-content {
					max-width: calc(61rem + var(--padding-rl) * 2);
					padding-inline: var(--padding-rl);
					padding-bottom: 0;
					grid-template-columns: auto 1fr;
					grid-template-areas: 'textContent figure';
				}

				.text-content {
					grid-area: textContent;
					max-width: 32.5rem;
					padding-inline: 0;
					margin-top: 4rem;
				}

				.section-heading {
					font-size: 6rem;
				}

				.section-sub-heading {
					font-size: 2.5rem;
					text-wrap: balance;
				}

				figure {
					position: relative;
					grid-area: figure;
					overflow: visible;
					right: unset;
					justify-self: end;

					img {
						width: auto;
						max-width: 100%;
					}
				}
			}
		}
	}

	.section-1 {
		display: grid;
		justify-items: center;
		width: 100%;
		padding-block: 3.125rem 10.25rem;

		.section-content {
			display: grid;
			width: 100%;
			max-width: 90rem;
			isolation: isolate;
		}

		.text-content  {
			display: grid;
			align-content: start;
			max-width: 21.875rem;
			justify-self: center;
		}

		.section-heading {
			font-size: 3.75rem;
		}

		figure {
			overflow: hidden;

			img {
				width: 26.25rem;
				max-width: unset;
			}
		}

		@media (26.25rem <= width < 62.5rem ) { /* 420px to 999px */
			figure {
				justify-self: center;
			}
		}

		@media (width >= 62.5rem) { /* 1000px */
			& {
				padding-block: 7.5rem 16.25rem;
				background-position: center bottom;

				.section-content {
					grid-template-columns: 1fr auto;
					grid-template-areas: 'figure textContent';
				}

				.text-content {
					grid-area: textContent;
					max-width: 35rem;
				}

				.section-heading {
					font-size: 6rem;
				}

				figure {
					grid-area: figure;
					overflow: visible;
					z-index: -1;
					margin-right: -17.5rem;

					img {
						width: auto;
						max-width: 100%;
					}
				}

				.button {
					justify-self: center;
				}
			}
		}

		@media (width >= 81.25rem) { /* 1300px */
			& {
				.text-content {
					margin-top: 5.625rem;
				}

				.button {
					justify-self: start;
				}
			}
		}
	}

	.section-2 {
		display: grid;
		justify-items: center;
		width: 100%;
		padding-block: 3rem 4.375rem;
		padding-inline: var(--padding-rl);

		.section-content {
			display: grid;
			width: 100%;
			max-width: 90rem;
		}

		.text-content  {
			display: grid;
			align-content: start;
			width: 100%;
			max-width: 35rem;
			justify-self: center;
			margin-bottom: 2.8125rem;
		}

		.section-heading {
			font-size: 4.5rem;
			margin-bottom: 0.6em;
		}

		.links-list {
			display: grid;
			gap: 1.25rem;
			list-style-type: none;
			padding-left: 0;
			margin-block: 1.125rem 0;

			a {
				display: block;
				font-weight: 400;
				font-size: 1.125rem;
				line-height: 1.4;
				padding-left: 2.8125rem;
				background-image: url(../images/bullet-heart-blue.png);
				background-repeat: no-repeat;
				background-position: left top;

				&,
				&:visited {
					color: hsl(0, 0%, 0%);
				}

				&:hover,
				&:focus {
					text-decoration: none;
					font-weight: 700;
					color: var(--clr-link);
				}
			}
		}
		figure {
			justify-self: center;
		}

		@media (width >= 62.5rem) { /* 1000px */
			& {
				padding-block: 7.5rem;

				.section-content {
					grid-template-columns: auto auto;
					justify-content: space-between;
					align-items: center;
					gap: 2.5rem;
				}

				.text-content {
					margin-bottom: 0;
				}

				.section-heading {
					font-size: 6rem;
				}

				.section-sub-heading {
					font-size: 2.5rem;
				}
			}
		}

		@media (width >= 81.25rem) { /* 1300px */
			& {
				padding-block: 5.625rem 7.5rem;

				.text-content {
					max-width: 35rem;
				}
			}
		}
	}

	@media (width >= 90rem) { /* 1440px */
		.section-wrapper {
			> section {
				background-size: 100%;
			}
		}
	}
}