/* ---------- Footer (component: Footer) ---------- */

.footer {
	background: var(--slate);
	color: #C6CDD2;
	margin-top: var(--s12);
	margin: auto 0 0;
}

.footer .container {
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 var(--s3);
}

.footer-inner {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
	gap: var(--s6);
	padding: var(--s8) 0 var(--s6);
}

.footer h4 {
	font-family: var(--font-display);
	color: #fff;
	font-size: 1.05rem;
	margin-bottom: var(--s2);
}

.footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	text-wrap: balance;
}

.footer a {
	color: #C6CDD2;
	text-decoration: none;
	transition: color .2s;
}

.footer a:hover {
	color: var(--yellow);
}

.footer-logo {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.9rem;
	color: #fff;
	line-height: 1;
	display: inline-flex;
	align-items: flex-start;
	gap: 4px;
}

.footer-logo .dots span {
	display: inline-block;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	margin-left: 3px;
}

.footer-logo .dot--yellow {
	background: var(--yellow);
	animation: bounce 2.2s ease-in-out infinite;
}

.footer-logo .dot--mint {
	background: var(--mint);
	animation: bounce 2.4s ease-in-out infinite;
}

.footer-logo .dot--pink {
	background: var(--pink);
	animation: bounce 2.6s ease-in-out infinite;
}

@keyframes bounce {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-6px);
	}
}

.footer .tagline {
	font-size: .92rem;
	margin: var(--s1) 0 var(--s3);
}

.footer .info {
	font-size: .92rem;
	text-wrap: balance;
}

.footer-bottom {
	border-top: 1px solid #4E5B64;
	padding: var(--s3) 0;
	font-size: .88rem;
	display: flex;
	justify-content: space-between;
	gap: var(--s2);
	flex-wrap: wrap;
}

@media (max-width: 920px) {
	.footer-inner {
		grid-template-columns: 1fr 1fr;
	}
	.footer-inner > *:first-child {
		grid-column: 1 / 3;
	}
	.footer-inner > *:nth-child(2) {
		grid-column: 1 / 1;
	}
	.footer-inner > *:nth-child(3) {
		grid-column: 2 / 2;
	}
	.footer-inner > *:last-child {
		grid-column: 1 / 3;
	}
}

/* @media (max-width: 560px) {
	.footer-inner {
		grid-template-columns: 1fr;
	}
} */