.footer .cols {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	align-items: flex-start;

	color: gray;

	.col {
		display: flex;
		flex-direction: column;
		font-size: 14px;
		justify-content: flex-start;
		align-items: flex-start;
		margin: 0 1rem 0 1rem;

		a {
			color: var(--user-preferred-gray-underlay) !important;
			text-decoration: none;
			margin-bottom: 0.8em;
		}

		font.footer-heading {
			font-weight: 600;
			margin-bottom: 0.8em;
			font-size: 16px;
			width: 100%;

			text-align: left;

			color: black !important;

			a {
				color: black !important;
				text-decoration: underline;
			}
		}
	}
}

@media (max-width: 630px) {
	.click-holder {
		position: absolute;
		width: 100%;
		height: 48px;
		bottom: 0;
	}

	.footer > .rows > .cols,
	.footer > .rows > .cols > .col {
		width: 100%;
		user-select: none;
	}

	.footer .collapsed {
		height: 24px;
	}

	.footer > .rows > .cols > .col {
		transition: 0.8s;
		position: relative;
		overflow: hidden;
		--padding: 20px;
		padding: var(--padding) 0;

		font {
			padding-left: 10px;
			font-size: 24px;
		}

		& > a {
			pointer-events: none;
			padding-left: var(--padding);
			font-size: 20px;
		}
	}

	.footer > .rows > .cols > .col.show {
		height: calc(var(--height) - 24px) !important;

		&::after {
			transform: rotate(180deg);
		}

		.click-holder {
			height: 24px;
		}

		* {
			pointer-events: all;
		}
	}

	.footer > .rows > .cols > .col::before {
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		width: calc(100% - (var(--padding) * 2));
		height: 1px;
		background: var(--user-preferred-gray-underlay);
	}

	.footer > .rows > .cols > .col::after {
		transition: 0.5s;
		content: "▼";
		position: absolute;
		bottom: 0;
		right: calc((var(--padding) * 2) + 24px);
		font-size: 24px;
		color: gray;
	}
}

.center {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}

.rows {
    display: flex;
	flex-direction: row;
    gap: 1rem;
}