.l-footer {
	padding: 2rem map-get($global-bleed, small) 4rem map-get($global-bleed, small);

	// Breakpoints
	@include mappy-bp(palm-medium) {
		padding-left: map-get($global-bleed, large);
		padding-right: map-get($global-bleed, large);
	}
}


// [1] Adds and removes the tagline from the footer nav lockup by toggling
// its presence in the DOM. Nested CSS grids won't zoom properly and cause text
// to not break, so we need to use this approach.
.l-footer__meta--footer {
	display: initial;
	margin-top: 3rem;

	// Breakpoints
	@include mappy-bp(palm-small) {
		@include hide(remove); // [1]
	}

	@include mappy-bp(lap-small) {
		margin-top: 6rem;
	}

	@include mappy-bp(lap-small) {
		display: unset;
	}
}


.l-footer__meta--nav {
	@include hide(remove); // [1]

	// Breakpoints
	@include mappy-bp(palm-small) {
		// Supports
		@supports #{$supports-flex} {
			display: flex;
			flex-direction: column;
		}
	}

	@include mappy-bp(lap-small) {
		@include hide(remove); // [1]
	}
}


.l-footer__theme-switcher {
	margin-top: 1rem;
}


.l-footer__tagline-copyright {
	// Supports
	@supports #{$supports-flex} {
		display: flex;
		flex-direction: column;

		// Breakpoints
		@include mappy-bp(lap-small) {
			flex-direction: row;
			justify-content: space-between;
			margin-top: 1rem;
		}
	}
}


.l-footer__copyright {
	margin-top: 2rem;
	// Supports
	@supports #{$supports-flex} {
		// Breakpoints
		@include mappy-bp(lap-small) {
			margin-top: 0;
		}
	}
}


.l-footer__top {
	margin-top: 1rem;

	// Breakpoints
	@include mappy-bp(palm-small) {
		margin-top: auto;
	}

	@include mappy-bp(lap-small) {
		margin-top: 0;
	}
}
