@use '../lib/colors';
@use '../lib/layout';
@use '../lib/typography';

.page-section {
	padding: layout.$large-gap;

	&.inverse {
		color: colors.$inverse-text;
		background-color: colors.$blue-800;

		h2:after {
			background-color: colors.$gray-50;
		}

		:any-link,
		a[href] {
			color: colors.$gray-300;

			&:hover {
				color: colors.$yellow-500;
			}
		}

		.cta-link {
			border-color: colors.$gray-300;

			&:hover {
				border-color: colors.$yellow-500;
			}
		}
	}

	&.footer {
		background-color: colors.$teal-500;
	}
}

main:not(.expand) + .page-section.footer {
	margin-top: layout.$huge-gap;
}