.footer,
.tribe-common .footer {
	/* Puts footer at bottom of page all the time. See reset.css for flexbox implementation. Make sure .footer is a direct child of body. */
	margin-top: auto;
	background-color: var(--red);
	color: var(--white);
	padding-top: var(--spacing-20);
	padding-bottom: var(--spacing-20);
	text-align: center;
	font-size: var(--h6);

	a {
		color: var(--white);

		&:hover,
		&:focus-visible {
			color: var(--gray-light);
		}
	}

	@media (width > 768px) {
		padding-top: var(--spacing-40);
		padding-bottom: var(--spacing-40);

		.container {
			display: flex;
		}
	}
}

.footer__column {
	@media (width > 768px) {
		width: 50%;
		display: flex;
		flex-direction: column;
		justify-items: space-between;

		> *:last-child {
			margin-top: auto;
		}
	}
}

.footer__column--left {
	@media (width > 768px) {
		text-align: left;
	}
}

.footer__column--right {
	@media (width > 768px) {
		text-align: right;
	}
}

.footer__logo {
	margin-bottom: var(--spacing-20);

	.logo {
		margin: 0 auto;
		max-width: 200px;

		@media (width > 768px) {
			margin: 0;
		}
	}

	svg {
		width: 100%;
	}
}

.footer__address-text {
	> *:last-child {
		margin-bottom: 0;
	}
}

.footer__social .menu-social__items {
	@media (width > 768px) {
		justify-content: flex-end;
	}
}