@layer components {
	.about-section {
		background-color: var(--color-brand);
		color: var(--color-bg);
		padding: var(--space-section) var(--site-padding);
	}

	.about-section__inner {
		max-width: var(--narrow-width);
		margin-inline: auto;
	}

	.about-section__heading {
		font-size: var(--text-3xl);
		font-weight: 900;
		line-height: var(--leading-tight);
		text-transform: uppercase;
		color: var(--color-text);
		margin-block-end: var(--space-2xl);
	}

	.about-section__lead {
		font-size: var(--text-xl);
		font-weight: 700;
		line-height: var(--leading-tight);
		margin-block-end: var(--space-xl);
	}

	.about-section__text {
		font-size: var(--text-base);
		line-height: var(--leading-normal);
	}

	.about-section__block {
		margin-block-start: var(--space-2xl);
	}

	.about-section__subtitle {
		font-size: var(--text-base);
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		margin-block-end: var(--space-sm);
	}

	/* --- CTA button --- */

	.about-section__cta {
		margin-block-start: var(--space-2xl);
		text-align: center;
	}

	.about-section__btn {
		display: inline-block;
		padding: var(--space-sm) var(--space-xl);
		background-color: var(--color-text);
		color: var(--color-bg);
		font-size: var(--text-base);
		font-weight: 700;
		text-transform: uppercase;
		text-decoration: none;
		letter-spacing: 0.05em;
		border-radius: var(--radius-btn);
		transition: opacity var(--transition-fast);

		&:hover {
			opacity: 0.9;
		}

		&:focus-visible {
			outline: 2px solid var(--color-text);
			outline-offset: 2px;
		}
	}

	/* --- Note with email --- */

	.about-section__note {
		margin-block-start: var(--space-2xl);
		font-weight: 700;
		text-transform: uppercase;
		text-align: center;
		line-height: var(--leading-tight);

		& a {
			color: var(--color-bg);
			text-decoration: none;

			&:hover {
				opacity: 0.7;
			}

			&:focus-visible {
				outline: 2px solid var(--color-bg);
				outline-offset: 2px;
				border-radius: 2px;
			}
		}
	}
}