.hero {
	text-align: center;

	h1 {
		margin-top: 0;
		font-size: 48px;

		&.hero__title--color-normal {
			color: inherit;
		}

		&.hero__title--color-accent1 {
			color: var(--color-brand-accent);
		}

		&.hero__title--color-accent2 {
			color: var(--color-brand-accent2);
		}

		@container (max-width: 420px) {
			font-size: 32px;
		}
	}

	.hero__subtitle {
		font-size: 32px;

		@container (max-width: 420px) {
			font-size: 24px;
		}
	}

	h1,
	.hero__subtitle {
		text-wrap: balance;
	}

	&.hero--color-text-fg-on-text-bg {
		background-color: var(--color-brand-text-bg);
		color: var(--color-brand-text-fg);
	}

	&.hero--color-text-accent-on-text-bg {
		background-color: var(--color-brand-text-bg);
		color: var(--color-brand-text-accent);
	}

	&.hero--color-text-accent2-on-text-bg {
		background-color: var(--color-brand-text-bg);
		color: var(--color-brand-text-accent2);
	}

	&.hero--color-text-on-accent-on-accent {
		background-color: var(--color-brand-accent);
		color: var(--color-brand-text-on-accent);
	}

	&.hero--color-text-on-accent2-on-accent2 {
		background-color: var(--color-brand-accent2);
		color: var(--color-brand-text-on-accent2);
	}
}