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

		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);
			}
		}

		.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 {
			display: flex;
			align-items: flex-end;
		}

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

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

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

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

	}
}