.site-footer {
	background-color: var(--color-footer-background, var(--color-primary));
	padding-block: var(--footer-padding-block, 5rem);

	@media only screen and (max-width: 1024px) {
		padding-block-start: 2rem;
		padding-block-end: 1rem;
	}

	.footer__inner {
		--gap: 2rem;

		display: flex;
		justify-content: space-between;
		gap: 1.5rem;
		padding-block-end: 1.75rem;
		max-width: var(--width-content);
		margin: 0 auto;
		color: var(--color-footer-background-content, var(--color-primary-content));

		@media only screen and (max-width: 1024px) {
			flex-direction: column;
			gap: 3rem;

			margin-inline: var(--gutter-mobile);
			padding-block-end: 0;
		}

		.footer__content-title {
			font-size: 1rem;
			font-weight: 600;
			margin-block-end: 0.625rem;
		}

		.footer__logo {
			flex-basis: 20%;

			@media only screen and (max-width: 1024px) {
				width: fit-content;
				margin-inline: auto;
			}

			img {
				height: var(--footer-logo-height, 3.125rem);
				width: auto;
			}
		}

		.footer__logo--noimg {
			flex-basis: 20%;
			font-size: 1.125rem;
			font-weight: 600;

			color: var(
				--color-footer-background-content,
				var(--color-primary-content)
			);

			&:hover {
				color: var(
					--color-footer-background-content-hover,
					var(--color-primary-content-hover)
				);
			}
		}

		.footer__menus {
			display: flex;
			justify-content: space-between;
			flex-grow: 1;
			gap: var(--gap);

			@media only screen and (max-width: 767px) {
				flex-wrap: wrap;
			}

			> * {
				flex-basis: calc(100% / 3);
			}

			.footer__menu {
				display: flex;
				flex-direction: column;

				@media only screen and (max-width: 767px) {
					flex-basis: calc((100% - var(--gap)) / 2);
					align-items: center;
				}

				.footer__menu-list {
					list-style: none;
					padding: 0;
					margin: 0 0 2.8rem 0;
					color: var(
						--color-footer-background-content,
						var(--color-primary-content)
					);

					@media only screen and (max-width: 767px) {
						margin-block-end: 0;
					}

					li {
						margin-block-end: 0.625rem;

						a {
							text-decoration: none;
							color: var(
								--color-footer-background-content,
								var(--color-primary-content)
							);

							&:hover {
								color: var(
									--color-footer-background-content-hover,
									var(--color-primary-content-hover)
								);
							}
						}
					}
				}
			}
		}

		.footer__address-cta {
			display: flex;
			justify-content: space-between;
			flex-grow: 1;
			gap: var(--gap);

			@media screen and (max-width: 1024px) {
				flex-direction: column;
				align-items: center;
			}

			.footer__contact {
				flex-basis: 50%;
				@media screen and (max-width: 1024px) {
					text-align: center;
				}
			}

			.footer__cta-text {
				flex-basis: 50%;
				margin-block-end: 1.2rem;

				@media screen and (max-width: 1024px) {
					text-align: center;
				}
			}

			.cbp-button {
				color: var(--color-footer-background);
				background-color: var(--color-footer-background-content);

				border-color: var(--color-footer-background-content);

				text-decoration: none;
				padding: 0.6rem 1.5rem;

				&:hover {
					color: var(--color-footer-background-content);
					background-color: var(--color-footer-background);
				}
			}
		}

		.footer__socials {
			flex-basis: 28%;
			height: fit-content;

			display: flex;
			justify-content: flex-end;
			align-items: center;
			gap: 1.5rem;

			@media only screen and (max-width: 767px) {
				flex-basis: 100%;
				justify-content: center;

				margin-block-end: 2rem;
			}

			h2 {
				font-size: 0.875rem;
				font-weight: 600;
			}

			ul {
				display: flex;
				flex-wrap: wrap;
				gap: 0.5rem;

				list-style-type: none;
				padding: 0;

				li {
					display: inline-block;

					a {
						&:hover {
							svg {
								rect {
									fill: var(
										--color-footer-background-hover,
										var(--color-primary-hover)
									);
								}
								path {
									fill: var(
										--color-footer-background-content-hover,
										var(--color-primary-content-hover)
									);
								}
							}
						}
					}
				}
			}
		}
	}

	.footer__socket {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-top: 2px solid var(--color-accent);
		padding-top: 1rem;
		margin-top: 1rem;
		max-width: var(--width-content);
		margin: 0 auto;
		color: var(--color-footer-background-content, var(--color-primary-content));

		@media only screen and (max-width: 767px) {
			display: flex;
			flex-direction: column;

			gap: 1rem;
		}

		@media only screen and (max-width: 1024px) {
			margin-inline: var(--gutter-mobile);
		}

		.footer__legal {
			list-style: none;
			padding: 0;

			@media only screen and (max-width: 767px) {
				text-align: center;
			}

			li {
				display: inline-block;
				line-height: 1.1;

				padding-inline-end: 1ch;
				margin-inline-end: 0.5ch;

				border-right: 1px solid currentColor;

				&:last-of-type {
					border-right: none;
				}

				a {
					text-decoration: none;
					color: var(
						--color-footer-background-content,
						var(--color-primary-content)
					);

					&:hover {
						color: var(
							--color-footer-background-content-hover,
							var(--color-primary-content-hover)
						);
					}
				}
			}
		}
	}
}