.citizen-footer {
	padding: var( --space-xxl ) var( --padding-page );
	border-top: 1px solid var( --border-color-base );
	background-color: var( --color-surface-2 );
	clear: both;
	direction: ltr;
	font-size: 0.875rem;

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

	&__content {
		margin-right: auto;
		margin-left: auto;
	}

	&__siteinfo {
		margin-right: auto;
		margin-left: auto;

		.page-info {
			padding: var( --space-xs ) var( --space-md );
			font-size: 0.875rem;

			&__item {
				padding: var( --space-xxs ) 0;

				a {
					text-decoration: underline dotted;

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

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

	li {
		list-style: none;
	}
}

#footer {
	&-places {
		padding: var( --space-xs );
		font-size: 0.875rem;

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

		a {
			display: block;
		}
	}

	&-icons {
		display: flex;
		padding: var( --space-xs );

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

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

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

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