@use "../../scss/abstracts/colors" as *;
@use "../../scss/abstracts/fonts" as *;

#footer {
	position: relative;
	background: $light;
	padding: 1.5rem 0;
	margin: 2rem auto 0 auto;
	width: 100%;
}

#footer-list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	padding: 0;

	li {
		line-height: 2rem;
	}

	li:last-of-type {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		height: auto;
		& > * {
			padding: 10px 0;
		}
	}

	.footer-about {
		max-width: 40rem;
		text-align: center;

		.footer-about-header {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: center;

			& > * {
				margin: 0 0.3rem;
			}
		}
	}

	.footer-contact {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 20rem;
		height: auto;
		& > * {
			margin: 0;
			padding: 5px 0;
		}
	}

	.footer-legal {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 20rem;

		& > * {
			margin: 0;
			padding: 5px 0;
		}
	}
}
