foundation/foundation/public/less/base.less

/*utilities*/
.align-items-center {
	align-items: center;
}

.hide,
.hidden {
	display: none;
	visibility: hidden;
}

.top-zero {
	margin-top: 0;
}

.bottom-zero {
	margin-bottom: 0;
}

.top-spacer {
	margin-top: 2.5rem;
}

.bottom-spacer {
	margin-bottom: 2.5rem;
}

.top-spacer-4 {
	margin-top: 4rem;
}

.bottom-spacer-4 {
	margin-bottom: 4rem;
}

.gray-bg {
	background-color: @light-bg;
}

.dark-bg {
	background-color: @text-dark;
}

.text-left {
	text-align: left;
}

.text-right {
	text-align: right;
}

.text-center {
	text-align: center;
}

.text-muted {
	color: @text-muted;
}

.text-light {
	color: @text-light;
}

.text-white {
	color: #fff;
}

.text-normal {
	font-size: 1rem;
}

.text-medium {
	font-size: 1.5rem;
}

.text-small {
	font-size: 0.5rem;
}

.centered {
	margin-left: auto;
	margin-right: auto;
}

.bold {
	font-weight: bold;
}

.list-unstyled {
	padding: 0;

	li {
		list-style: none;
	}
}

.list-circle {
	list-style: circle;
}

.bullet {
	&::before {
		content: "\2022";
		display: inline-block;
		width: 1em;
		font-size: 1.25rem;
	}
}

.half-width {
	max-width: 50%;
}

.border {
	border: @border;
}

.border-top {
	border-top: @border;
}

.saturate {
	filter: grayscale(100%);

	&:hover {
		filter: grayscale(0%);
	}
}

/* colors */

.green-bullet {
	&::before {
		color: @indicator-green;
	}
}

/* components */

.grid-of-four,
.grid-of-three {
	grid-gap: 2.5rem;
	display: grid;
}

.grid-of-four {
	grid-template-columns: repeat(1, 1fr);

	@media screen and (min-width: @screen-palm) {
		grid-template-columns: repeat(2, 1fr);
	}

	@media screen and (min-width: @screen-xs) {
		grid-template-columns: repeat(3, 1fr);
	}

	@media screen and (min-width: @screen-sm) {
		grid-template-columns: repeat(4, 1fr);
	}
}

.grid-of-three {
	grid-template-columns: repeat(1, 1fr);

	@media screen and (min-width: @screen-palm) {
		grid-template-columns: repeat(2, 1fr);
	}

	@media screen and (min-width: @screen-xs) {
		grid-template-columns: repeat(3, 1fr);
	}
}

.columns {
	display: flex;
	justify-content: space-between;
	flex-direction: column;

	@media screen and (min-width: @screen-xs) {
		flex-direction: inherit;
	}
}

.column {
	margin-bottom: 1rem;

	@media screen and (min-width: @screen-xs) {
		margin: 0;
	}
}

.three-column {
	max-width: 100%;

	@media screen and (min-width: @screen-xs) {
		max-width: 33%;
	}
}

.copyright {
	font-size: 1rem;

	@media screen and (min-width: @screen-xs) {
		font-size: 0.75rem;
	}
}

.flex-wrap {
	flex-wrap: wrap;
	justify-content: flex-start;
}

.grid-center {
	justify-items: center;
}