@layer components.page-intro-1 {
	[data-c-page-intro-1] {
		padding-top: 50px;
		padding-bottom: 50px;

		color: var(--color-dark-blue);

		row-gap: 150px;

		@media screen and (max-width: 1199px) {
			padding-top: 24px;
			padding-bottom: 24px;
			row-gap: 60px;
		}

		@media screen and (max-width: 767px) {
			row-gap: 32px;
		}

		.intro {
			line-height: 140%;
			font-size: var(--font-size-2xl);
			font-weight: var(--font-weight-extra-bold);

			@media screen and (max-width: 1199px) {
				font-size: var(--font-size-base);
				line-height: 130%;
			}

			@media screen and (max-width: 767px) {
				font-size: var(--font-size-lg);
			}

			@media (max-width: 576px) {
				font-size: var(--font-size-md);
			}
		}

		.description {
			line-height: 140%;
			font-size: var(--font-size-base);

			@media screen and (max-width: 767px) {
				font-size: var(--font-size-lg);
			}

			@media (max-width: 576px) {
				font-size: var(--font-size-md);
			}
		}

		h2 {
			font-family: var(--font-family-serif);
			font-weight: var(--font-weight-heavy);
			font-size: var(--font-size-4xl);
			margin-bottom: var(--space-3);
			line-height: 110%;

			@media screen and (max-width: 1199px) {
				font-size: var(--font-size-3xl);
			}

			@media screen and (max-width: 767px) {
				font-size: var(--font-size-2xl);
			}
		}

		.intro :where(p, ul, ol):not(:last-child),
		.description :where(p, ul, ol):not(:last-child) {
			margin-bottom: var(--space-4);
		}

		.learn-more-button {
			margin-top: var(--space-10);

			@media screen and (max-width: 767px) {
				margin-top: var(--space-6);
				margin-bottom: var(--space-6);
			}
		}

		.blob {
			position: absolute;
			bottom: 120px;
			right: 0;
			width: 363px;
			height: auto;
			z-index: 1;
			user-select: none;

			@media screen and (max-width: 1399px) {
				width: 320px;
				bottom: 80px;
			}

			@media screen and (max-width: 1199px) {
				width: 290px;
				bottom: 400px;
			}

			@media screen and (max-width: 991px) {
				display: none;
			}
		}

	}
}