.u1-row {
	/* 
	Default: By default, much of the layout will be inside a grid where grid-gap fights against margins. 
	So margins are not be the default but the expection.

	This may feel like an extraneous class, but there are so many edge cases where
	margins are needed _just_ for a row from an element that doesn't have margin by default like
	section, div, etc...
	
	Also, <p> can't contain other block level elements, so to mix <p> with <div> some kind of compromise 
	needs to be made. 
	*/
	margin-bottom: var(--u1-row-margin);
	margin-top: var(--u1-row-margin);
	/*
	1. Don't do one line declaration in case it overrides other margins on sides.
	2. Margins on top AND bottom to take advantage of "margin collapse" and consistency with other
		margin displaying elements.
	*/
}

.u1-sticky-top {
	position: sticky;
	top: calc(0px + var(--u1-sticky-top));
	z-index: 1;
}

.u1-row-margin-bottom {
	/* Often we only want spacing below an element.*/
	margin-bottom: var(--u1-row-margin);
}

.u1-overflow-hidden {
	overflow: hidden;
}

.u1-ellipsis {
	overflow: hidden;
	text-overflow: ellipsis;
}

.u1-bg-color {
	background-color: currentColor;
}

.u1-disabled {
	/*Placeholder class for things disabled...?*/
	filter: saturate(0);
}

.u1-invert {
	filter: invert();
}

.u1-pointer {
	cursor: pointer;
}

.u1-opacity-50 {
	opacity: 0.5;
}

.u1-opacity-75 {
	opacity: 0.75;
}

.u1-opacity-25 {
	opacity: 0.25;
}

.u1-relative {
	position: relative;
}

.u1-absolute {
	position: absolute;
}

.u1-place-items-center,
.u1-place-center {
	place-items: center;
}

.u1-align-items-center,
.u1-align-center {
	align-items: center;
}

.u1-align-end {
	align-items: end;
}

.u1-align-items-start,
.u1-align-start {
	align-items: flex-start;
}

.u1-justify-content-end,
.u1-justify-end {
	justify-content: flex-end;
	justify-items: end;
}

.u1-no-events {
	pointer-events: none;
}

.u1-fixed-centered {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
}

.u1-opacity-low-hover-100 {
	opacity: 0.3;
}

.u1-opacity-med-hover-100 {
	opacity: 0.6;
}

.u1-opacity-low-hover-100:hover,
.u1-opacity-med-hover-100:hover {
	opacity: 1;
}

.u1-hover-brighten:hover {
	filter: brightness(1.2);
}

.u1-hover-darken:hover {
	filter: brightness(0.8) saturate(1.3);
}

.u1-hover-box,
.u1-hover {
	position: relative;
}

.u1-hover-box:hover::after,
.u1-hover:hover::after {
	display: block;
	content: " ";
	transform: scale3d(1.1, 1.1, 1.1);
	border-radius: 0.3rem;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	opacity: 0.2;
	background: currentColor;
}

.u1-hover:hover::after {
	transform: none;
	border-radius: 0;
}

.u1-width-100 {
	width: 100%;
}

.u1-bg-transparent {
	background: transparent;
}

.u1-float-left {
	float: left;
}

.u1-float-right {
	float: right;
}

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

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

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

.u1-flow-dense {
	grid-auto-flow: dense;
}

.u1-no-wrap {
	white-space: nowrap;
}

.u1-non-mobile-only {
	/*Placeholder for reference*/
}

.u1-mobile-only {
	display: none;
}

.u1-counter {
	counter-reset: u1-counter;
}
.u1-counter-label::before {
	counter-increment: u1-counter;
	content: counter(u1-counter);
}

@media (max-width: 960px) {
	.u1-non-mobile-only {
		display: none;
	}
	.u1-mobile-only {
		display: initial;
	}
}