/** =====================================================================================
 *  Spacing
 ===================================================================================== */

/**
 * For faster mobile-friendly development,
 * use these utility classes for showing and hiding
 * content by device via media query.
 *
 * Based on this table: https://v4-alpha.getbootstrap.com/layout/responsive-utilities/
 */

.u-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	border: 0;
	padding: 0;
	white-space: nowrap;
	clip-path: inset(100%);
	overflow: hidden;
}

.u-hidden {
	display: none !important
}

@include mq($max: m) {
	.u-hidden\@s-down {
		display: none!important
	}
}

@include mq(m) {
	.u-hidden\@m-up {
		display: none!important
	}
}

@include mq($max: l) {
	.u-hidden\@m-down {
		display: none!important
	}
}

@include mq(l) {
	.u-hidden\@l-up {
		display: none!important
	}
}

@include mq($max: $bp-max) {
	.u-hidden\@l-down {
		display: none!important
	}
}