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

	& .footer-content {
		padding-block: 32px;
		padding-inline: 16px;

		& .footer-content-container {
			max-width: var(--container-width);
			margin-inline: auto;
			width: 100%;

			display: flex;
			flex-direction: column;
			gap: 64px;

			& .footer-grid {
				display: grid;
				grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
				column-gap: 4px;
				row-gap: 32px;

				& .footer-grid-item {
					display: flex;
					flex-direction: column;
					gap: 8px;

					& .footer-grid-item-title {
					}

					& .footer-grid-item-links {
						display: flex;
						flex-direction: column;
						gap: 4px;

						& .footer-grid-item-link {
							color: var(--color-fg-2);
						}
					}
				}
			}

			& .footer-info {
				display: flex;
				justify-content: space-between;
				align-items: flex-end;
				gap: 16px;

				& .footer-logo {
					width: fit-content;

					& .footer-logo-icon {
						width: 100%;
						max-width: 112px;
					}
				}

				& .footer-social-links {
					display: flex;
					gap: 16px;
					margin-top: 16px;

					& .footer-social-link {
						width: 24px;
						height: 24px;

						display: flex;
						align-items: center;
						justify-content: center;

						overflow: clip;

						& .footer-social-icon {
							flex-shrink: 0;
							width: 56px;
							height: 56px;
						}
					}
				}
			}
		}
	}

	& .footer-extras {
		border-top: 1px solid var(--color-border);
		padding-inline: 16px;
		padding-block: 16px;

		& .footer-extras-container {
			max-width: var(--container-width);
			margin-inline: auto;
			width: 100%;

			display: flex;
			justify-content: space-between;
			gap: 16px;
			flex-wrap: wrap;

			& .footer-extras-links {
				display: flex;
				flex-wrap: wrap;
				gap: 16px;
			}
		}
	}
}