.citizen-footer {
	--min-width-footer-link: 10rem;
	clear: both;
	padding: var( --space-xxl ) var( --padding-page );
	margin-top: 8rem;
	// Reserve space for header
	margin-bottom: var( --header-size );
	contain: content;
	color: var( --color-subtle );
	background-color: var( --color-surface-1 );
	direction: ltr;
	.mixin-citizen-font-styles( 'small' );

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

	&__content,
	&__bottom {
		display: flex;
		gap: var( --space-md ) var( --space-xxl );
		justify-content: space-between;
		padding: var( --space-md ) 0;
		margin-inline: auto;

		@media ( max-width: @min-width-breakpoint-tablet ) {
			flex-direction: column;
		}
	}

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

		@media ( min-width: @min-width-breakpoint-tablet ) {
			align-items: center;
		}
	}

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

	&__sitetitle {
		display: flex;
		flex-direction: column;
		gap: var( --space-sm );

		.mw-logo-wordmark {
			font-size: var( --font-size-xxx-large );
		}
	}

	&__desc {
		margin: 0;
		line-height: var( --line-height-small );
	}

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

	ul {
		margin: 0;
	}

	li {
		list-style: none;
	}
}

#footer {
	&-places {
		display: flex;
		flex-grow: 1;
		align-items: flex-end;

		@media ( max-width: @max-width-breakpoint-tablet ) {
			margin-inline: calc( -1 * var( --space-md ) );
		}

		@media ( min-width: @min-width-breakpoint-desktop ) {
			margin-top: calc( -1 * var( --space-xs ) );
		}

		ul {
			display: grid;
			flex-grow: 1;
			grid-template-columns: repeat( auto-fit, minmax( var( --min-width-footer-link ), 1fr ) );
		}

		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;
			}
		}
	}

	&-icons {
		ul {
			display: flex;
			flex-wrap: wrap;
			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;
			background-color: var( --background-color-base-fixed ); // To prevent this being flipped in dark mode
		}
	}
}

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