@layer components.page-intro-3 {
	[data-c-page-intro-3] {
		padding-bottom: 50px;
		position: relative;

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

		row-gap: 150px;

		@media screen and (max-width: 1199px) {
			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);
			margin-top: var(--space-10);

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

			@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) {
			margin-bottom: var(--space-10);
		}

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

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

		.image-wrapper-mobile {
			display: none;

			@media screen and (max-width: 991px) {
				display: block;
				margin: var(--space-6) 0 0;
			}
		}

		.image-wrapper {
			padding-top: var(--space-10);

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

		.blob {
			position: absolute;
			top: -20px;
			right: 0;
			width: 400px;
			height: auto;
			z-index: -1;
			user-select: none;

			@media screen and (max-width: 1399px) {
				width: 270px;
			}

			@media screen and (max-width: 1199px) {
				width: 240px;
			}

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

	}
}