.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-image:
		url('../../images/circle-footer.svg'),
		linear-gradient(255deg, #6B30B3 25.69%, #7744B7 57.27%, #300566 83.33%);
	background-repeat: no-repeat;
	background-position:
		top center,
		center;
	background-size:
		auto 100%,
		auto;
	box-shadow: 5px 4px 30px 0 rgba(0, 0, 0, 0.10);
	color: var(--white);
	padding-block: var(--spacing-30);

	@media (width > 768px) 	{
		border-radius: 60px 60px 0 0;
	}

	@media (width > 1000px) {
		padding-block: var(--spacing-40);
	}

	.container 	{
		display: flex;
		flex-direction: column;
		gap: var(--spacing-20);

		@media (width > 1000px) {
			gap: var(--spacing-50);
		}
	}
}

.footer__top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-direction: column;

	@media (width > 768px) {
		flex-direction: row;
	}
}

.footer__logo {
	width: 100%;
	max-width: 480px;
}

.footer__phone-link {
	color: var(--white);
	font-size: var(--step-1);
	font-weight: 600;
	text-decoration: none;
}

.footer__columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
	gap: var(--spacing-20);
}

.footer__column-title {
	color: var(--purple-100);
	font-size: 1rem;
	font-weight: 700;
	text-transform: uppercase;
}

.footer__hours-items {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 1rem;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-10);
}

.footer__contact-item {
	.address > *:last-child {
		margin-bottom: 0;
	}
}

.footer__day {
	font-weight: 600;
	margin-bottom: 0;
	font-size: 1rem;
}

.footer__time {
	margin-bottom: 0;

	em {
		font-style: normal;
	}
}

.footer__fine-print {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--spacing-10);

	@media (width > 1000px) {
		flex-direction: row;
		justify-content: space-between;
		gap: var(--spacing-40);
	}
}