@layer patterns {
	.element-text :where(ul, ol) {
		padding-inline-start: 1.25em;
	}
	.element-text h1 {
		font-size: var(--font-size-hero);
		line-height: var(--lh-hero);
		font-weight: var(--font-weight-bold);
		&.hero-lg {
			font-size: var(--font-size-hero-lg);
			line-height: var(--lh-hero-lg);
			font-weight: var(--font-weight-bold);
		}
	}
	.element-text h2 {
		font-size: var(--font-size-heading-3xl);
		line-height: var(--lh-heading-3xl);
		font-weight: var(--font-weight-bold);
	}
	.element-text h3 {
		font-size: var(--font-size-heading-2xl);
		line-height: var(--lh-heading-2xl);
		font-weight: var(--font-weight-medium);
	}
	.element-text h4 {
		font-size: var(--font-size-heading-md);
		line-height: var(--lh-heading-md);
		font-weight: var(--font-weight-bold);
	}
	.element-text h5 {
		font-size: var(--font-size-heading-md);
		line-height: var(--lh-heading-md);
	}
	.element-text h6 {
		font-size: var(--font-size-heading-sm);
		line-height: var(--lh-heading-sm);
	}
	.element-text :where(p, ul, ol, pre, dl) {
		font-size: var(--font-size-base);
		line-height: var(--lh-base);
	}

	.element-text .lead {
		font-size: var(--font-size-lead);
		line-height: var(--lh-lead);
	}

	.element-text p:has(.btn) {
		display: flex;
		justify-content: center;
	}

	.element-text .btn {
		display: inline-block;
		text-align: center;
		width: 100%;

		@media (min-width: 768px) {
			width: 48%;
		}
	}

	.element-text ol {
		list-style-type: decimal;
	}

	.element-text ul {
		list-style-type: disc;
	}

	/* link-lists with icons */
	.element-text {
		ul:has(li a svg) {
			list-style: none;
			padding-inline-start: 0;
		}
		ul li:has(a svg) {
			display: flex;
			list-style: none;
		}
		ul li a:has(svg) {
			padding: var(--size-1-5) var(--size-2);

			&:focus,
			&:focus-visible {
				outline-offset: 0;
			}
		}
	}
}