@layer blocks {
	.footer-wrapper {
		--link-color: var(--color-white);
		--link-hover-color: var(--color-white);
		--focus-box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-teal), 0 0 0 5px var(--color-black);

		background-color: var(--color-gray-3);
		color: var(--color-gray-4);
		padding-block: 30px;

		@media (width >= 48em) {
			padding-block: 45px;
		}
	}

	.footer {
		display: grid;
		gap: 30px;
		margin-inline: auto;
		max-inline-size: min(100% - var(--container-gutter, 0.9375rem) * 2, var(--max-width, 80rem));

		@media (width >= 48em) {
			gap: 45px;
		}
	}
}