.legal {
	--_padding-inline: clamp(1rem, 5vw, 4rem);
	padding-block: 2rem;
	padding-inline: var(--_padding-inline);
	counter-reset: title;
	max-width: 100ch;
	margin-inline: auto;
	padding-block: 12rem 5rem;
	background-color: var(--color-light-blue);

	@media (width < 700px) {
		padding-block: 3rem;
	}

	h1 {
		font-size: 2.5rem;
		font-weight: 800;
		color: var(--color-gold);
	}
	h2 {
		margin-top: 1em;
		font-size: 1.75rem;
		font-weight: 700;
		counter-increment: title;
		counter-reset: subtitle;
		text-wrap: balance;
		color: var(--color-gold);

		&::before {
			content: counter(title) " - ";
		}
	}
	h3 {
		margin-block: 1em 0.75em;
		font-size: 1.4rem;
		font-weight: 500;
		text-wrap: pretty;
		color: var(--color-gold);
		counter-increment: subtitle;
	}
	.letter-list {
		padding-left: 0;

		h3::before {
			content: counter(subtitle, lower-alpha) ")";
			margin-right: 0.5ch;
		}
	}
	p,
	li,
	td {
		font-size: 1rem;
		margin-top: 1.5em;
		line-height: 1.5;
		text-wrap: pretty;
		text-align: justify;
	}
	ul {
		padding-left: 1.5rem;
		list-style: initial;
	}
	table {
		border-collapse: collapse;
		margin-top: 1.5rem;
	}
	td {
		border: 2px solid var(--color-gold);
		padding: 0.5rem;
	}
	.padding {
		padding-left: 1.5rem;
	}
}