.citizen-footer {
	padding: var( --space-xxl ) var( --padding-page );
	margin-top: var( --space-xxl );
	// Reserve space for header
	margin-bottom: var( --header-size );
	clear: both;
	font-size: var( --font-size-small );
	color: var( --color-subtle );
	background-color: var( --color-surface-2 );
	direction: ltr;
	contain: content;

	&__container {
		max-width: var( --width-layout--extended );
		margin-inline: auto;
	}

	&__content,
	&__bottom {
		display: flex;
		flex-wrap: wrap;
		gap: var( --space-md );
		justify-content: space-between;
		padding: var( --space-md ) 0;
	}

	&__bottom {
		align-items: center;
		margin-inline: auto;
		border-top: var( --border-width-base ) solid var( --border-color-base );
	}

	&__siteinfo {
		display: flex;
		flex-direction: column;
		gap: var( --space-xs );
		max-width: 90ch;

		p {
			margin: 0;
			line-height: var( --line-height );
		}
	}

	a {
		font-weight: var( --font-weight-medium );
		color: var( --color-emphasized );
	}

	ul {
		display: flex;
		flex-wrap: wrap;
		margin: 0;
	}

	li {
		list-style: none;
	}
}

#footer {
	&-places {
		ul {
			flex-direction: column;
		}

		a {
			display: block;
			padding: var( --space-xs ) var( --space-md );
			border-radius: var( --border-radius-base );

			&:hover {
				background-color: var( --background-color-button-quiet--hover );
			}

			&:active {
				background-color: var( --background-color-button-quiet--active );
			}

			&:hover,
			&:focus {
				text-decoration: none;
			}
		}
	}

	&-tagline {
		padding: var( --space-xs ) 0;
	}

	&-icons {
		display: flex;

		ul {
			gap: var( --space-xs );
		}

		li {
			display: flex; // Horizontally aligned with there are two icons in the same li
			gap: var( --space-xs ); // Sometimes there can be multiple icon under the same li
		}

		a {
			display: flex;
			align-items: center;
		}
	}
}

@media ( min-width: @min-width-breakpoint-desktop ) {
	.citizen-footer {
		margin-bottom: 0;
	}

	#footer-sitetitle {
		font-size: 2rem;
	}
}