footer {
	width: 100%;
	background-color: var(--d);
	color: var(--l);
	padding: 1rem 0;

	.box {
		.links {
			width: 100%;
			height: fit-content;
			display: flex;
			gap: 1rem;
			padding-bottom: 1rem;
			border-bottom: 4px solid var(--l);

			a {
				width: 40px;
				height: 40px;
				background-color: var(--l);
				padding: 5px;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 5px;

				img {
					object-fit: contain;
				}
			}
		}

		.ql {
			padding: 1rem 0;
			border-bottom: 4px solid;

			p {
				text-align: center;
				margin-left: auto;
				margin-right: auto;
			}

			div {
				display: flex;
				flex-direction: column;
				gap: 0.5rem;
				align-items: center;

				a {
					color: var(--l);
				}
			}
		}

		p {
			text-align: center;

			a {
				color: var(--l);
			}
		}
	}
}

@media (min-width: 768px) {
	footer {
		.box {
			.ql {
				div {
					flex-direction: row;
					justify-content: center;
				}
			}
		}
	}
}