.outro {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;

	@media (min-width: 1024px) {
		align-items: center;
		text-align: center;
	}

	> h2 {
		padding: 0 var(--s-xs) 0 var(--s);

		&:first-of-type {
			@media (min-width: 1024px) {
				align-self: flex-start;
			}
		}

		&:last-of-type {
			display: none;

			@media (min-width: 1024px) {
				display: block;
				align-self: flex-end;
				margin-top: var(--s-lg);
			}
		}
	}

	> h2 + div {
		width: 100%;
		margin-top: var(--s-md);

		@media (min-width: 1024px) {
			margin-top: var(--s-lg);
		}

		> p {
			max-width: var(--w-xl);
			margin: 0 auto;
			color: var(--c-fg-dk);
			text-wrap: balance;
		}

		> nav {
			display: flex;
			justify-content: center;
			margin-top: var(--s-md);
		}

		> div {
			width: 100%;
			margin-top: var(--s-md);
		}
	}
}