@layer components.page-teaser-1 {
	[data-c-page-teaser-1] {
		margin-top: 50px;
		padding-top: 80px;
		padding-bottom: 120px;
		font-size: var(--font-size-base);
		color: var(--color-dark-blue);

		@media screen and (max-width: 767px) {
			padding-top: 60px;
			padding-bottom: 80px;
			font-size: var(--font-size-lg);
		}

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

		&+[data-c-page-teaser-1] {
			margin-top: 0;
			margin-bottom: 0;
		}

		&.has-bg-green {
			background-color: rgba(var(--color-green-rgb), 0.4);
		}

		&.has-bg-pink {
			background-color: rgba(var(--color-pink-rgb), 0.4);
		}

		&.has-bg-red {
			background-color: rgba(var(--color-red-rgb), 0.4);
		}

		&.has-bg-yellow {
			background-color: rgba(var(--color-yellow-rgb), 0.4);
		}

		&.has-bg-light-blue {
			background-color: rgba(var(--color-light-blue-rgb), 0.4);
		}

		&.has-bg-dark-blue {
			background-color: rgba(var(--color-dark-blue-rgb), 0.4);
		}

		&.has-bg-white {
			background-color: var(--color-white);
		}

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

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

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

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

	}
}