@layer components.event-learn-more {
	[data-c-event-learn-more] {
		padding-top: 50px;
		padding-bottom: 50px;
		font-size: var(--font-size-base);
		color: var(--color-dark-blue);
		position: relative;

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

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

		.text-content :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: 991px) {
				margin-top: var(--space-6);
				margin-bottom: var(--space-6);
			}
		}

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

			@media screen and (max-width: 1399px) {
				top: -10px;
				width: 260px;
			}

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

	}
}