/**
 * Positioning Utilities
 * Position, float, and transforms
 */

/* ===== Position ===== */
.sticky {
	position: sticky;
}

.relative {
	position: relative;
}

.absolute {
	position: absolute !important;
}

figure.absolute img {
	position: absolute !important;
}

/* ===== Position Values ===== */
.top-0 {
	top: 0;
}

.top-unset {
	top: unset;
}

figure.top-unset img {
	top: unset !important;
}

.top-50 {
	top: 50%;
}

.top-\[1em\] {
	top: 1em;
}

.top-\[3em\] {
	top: 3em;
}

.translate-y-50 {
	transform: translateY(-50%);
}

.bottom-0 {
	bottom: 0;
}

figure.bottom-0 img {
	bottom: 0 !important;
}

.left-0 {
	left: 0;
}

.left-content {
	left: clamp(24px, calc((100vw - 1200px) / 2), 9999px)
}

.right-0 {
	right: 0;
}

.right-\[1em\] {
	right: 1em;
}

[class~="top-\[20px\]"] {
	top: 20px;
}

/* ===== Float ===== */
.float-left {
	float: left;
}

.float-right {
	float: right;
}

/* ===== Transforms ===== */
.rotate-90 {
	transform: rotate(90deg);
}

.rotate-180 {
	transform: rotate(180deg);
}

.scale-x-flip {
	transform: scaleX(-1);
}

/* ===== Transform Origin ===== */
.origin-center {
	transform-origin: center;
}

/* ===== Vertical Align ===== */
.align-baseline {
	vertical-align: baseline;
}

.align-top {
	vertical-align: top;
}

.align-middle,
.align-middle img {
	vertical-align: middle;
}

.align-bottom {
	vertical-align: bottom;
}

.align-text-top {
	vertical-align: text-top;
}

.align-text-bottom {
	vertical-align: text-bottom;
}

/* ===== Responsive Positioning ===== */
@media (min-width: 782px) {
	[class~="lg:absolute"] {
		position: absolute !important;
	}

	[class~="lg:top-[3em]"] {
		top: 3em;
	}

	[class~="lg:right-[3em]"] {
		right: 3em;
	}
	[class~="lg:right-[calc1]"] {
		right: calc(-250px + 3em);
	}
}
@media (max-width: 781px) {
	[class~="md:float-left"] {
		float: left !important;
	}

	[class~="md:float-right"] {
		float: right !important;
	}
}