footer {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-block-start: 3rem;
	margin-inline: -3rem;
	padding: 3rem;
	background: linear-gradient(transparent, light-dark(var(--bright_yellow), var(--grey)));
	font-size: 0.9rem;
	line-height: 1.4rem;

	.footer-top,
	.footer-bottom {
		display: flex;
		align-items: center;
		justify-content: space-between;
		max-inline-size: 90rem;
		margin: 0 auto;
		width: 100%;
	}

	.footer-top {
		gap: 3rem;
		padding-inline: 1rem;

		h2 {
			font-size: 5rem;
			line-height: 5rem;
			position: relative;
			block-size: 10rem;
			inline-size: 30rem;
			justify-content: left;
			text-align: left;

			&::before {
				content: "Vale . Rocks" / "";
				position: absolute;
				filter: url(#motion-blur);
				opacity: 0.5;
			}
		}

		.footer-navigation {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			gap: 1rem;
			inline-size: 100%;

			.footer-tools {
				display: inline;
			}
		}
	}

	.footer-bottom {
		gap: 1rem;
		padding: 1rem;
		border-block-start: 2px solid var(--bright_grey);

		a::after {
			display: none;
		}
	}

	.breadcrumbs ol {
		display: flex;
		flex-wrap: wrap;
		justify-content: right;

		li {
			list-style: none;
			display: inherit;
			margin: 0;

			+ li::before {
				content: "→";
				margin-inline: 1ch;
			}

			+ li:dir(rtl)::before {
				content: "←";
			}
		}

		a {
			color: light-dark(var(--magenta), var(--green));
		}
	}

	ul,
	.footer-navigation a {
		display: flex;
		flex-wrap: wrap;
		justify-content: right;
		margin: 0;
		column-gap: 1.5rem;
		row-gap: 0.5rem;

		li {
			list-style-type: none;
			margin: 0;

			svg {
				block-size: 1.25rem;
				inline-size: 1.25rem;
			}
		}
	}

	.footer-top a,
	.footer-bottom p a {
		color: light-dark(var(--red), var(--yellow));
		text-decoration: none;

		&:hover {
			opacity: 0.6;
		}
	}

	.footer-bottom a svg {
		transition: scale 0.1s;

		&:hover,
		&:focus {
			scale: 1.1;
		}
	}

	@media (max-width: 45rem) {
		margin-block-start: 3rem;
		margin-inline: -0.8rem;
		padding: 0.8rem;
		padding-block-end: 2rem;

		.footer-top h2 {
			display: none;
		}

		.footer-bottom {
			flex-direction: column-reverse;
		}

		ul,
		.footer-navigation a {
			justify-content: space-around;
			row-gap: 1.5rem;
		}

		.breadcrumbs ol {
			margin-block-end: 1.5rem;
			justify-content: center;
			margin-inline: -0.8rem;
		}
	}
}