@layer components.page-vision-mission {
	[data-c-page-vision-mission] {
		padding-top: 100px;
		padding-bottom: 100px;

		@media screen and (max-width: 991px) {
			padding-top: 50px;
			padding-bottom: 50px;
		}

		.box {
			position: relative;

			@media screen and (max-width: 991px) {
				&:first-child {
					margin-bottom: 60px;
				}
			}
		}


		.wrapper {
			row-gap: 30px;

			@media screen and (max-width: 991px) {

				&>.image-wrapper {
					order: 1;
				}

				&>.text-wrapper {
					order: 0;
				}
			}

			.text-wrapper {
				display: flex;
				flex-direction: column;
				row-gap: var(--space-2);
				justify-content: center;


				h2 {
					font-family: var(--font-family-serif);
					font-weight: var(--font-weight-heavy);
					color: var(--color-dark-blue);
					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);
					}
				}

				.description {
					font-size: var(--font-size-base);
					color: var(--color-dark-blue);
					font-weight: var(--font-weight-extra-bold);

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

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

			@media screen and (max-width: 1199px) {
				width: 350px;
				top: -80px;
			}

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

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

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

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