/*
 * UG Student Life (template-ug-student-life.php)
 *
 * Page-specific styles; the shared .ugs-* layer is css/ug-subpages.css.
 * Cards use cqw so they scale as one piece.
 */

/* ------------------------------------------------------------------- hero */

.ugs-wrap .usl-hero {
	position: relative;
	overflow: hidden;
	min-height: 520px;
	display: flex;
	align-items: flex-end;
	margin-top: 16px;
}

.ugs-wrap .usl-hero__slides {
	position: absolute;
	inset: 0;
}

.ugs-wrap .usl-hero__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 70% center;
	opacity: 0;
	transition: opacity 1.2s ease;
}

.ugs-wrap .usl-hero__photo.is-active {
	opacity: 1;
}

.ugs-wrap .usl-hero__photo[data-pending] {
	display: none;
}

.ugs-wrap .usl-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(29, 12, 12, .9) 0%, rgba(29, 12, 12, .65) 40%, rgba(29, 12, 12, 0) 75%);
}

.ugs-wrap .usl-hero__shapes {
	position: absolute;
	z-index: 1;
	left: -46px;
	top: 0;
	width: 850px;
	max-width: none;
	height: 100%;
	pointer-events: none;
	display: none;
}

.ugs-wrap .usl-hero__inner {
	position: relative;
	z-index: 2;
	width: min(100% - 40px, var(--max-container-grid, 1280px));
	margin: 0 auto;
	padding: 0 0 40px;
}

.ugs-wrap .usl-hero__copy {
	max-width: 340px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.ugs-wrap .usl-hero__title {
	display: flex;
	flex-direction: column;
	gap: 4px;
	color: #fff;
}

.ugs-wrap .usl-hero__lead {
	font-size: 36px;
	font-weight: 600;
	line-height: 1.4;
}

.ugs-wrap .usl-hero__serif {
	font-family: 'New York Large', 'New York', Georgia, serif;
	font-style: italic;
	font-weight: 600;
	font-size: 44px;
	line-height: 1.1;
	color: var(--ugs-cream);
}

.ugs-wrap .usl-hero__sub {
	font-size: 18px;
	line-height: 1.5;
	color: rgba(255, 255, 255, .8);
}

@media (min-width: 1024px) {
	.ugs-wrap .usl-hero {
		height: 700px;
		align-items: center;
	}

	.ugs-wrap .usl-hero__photo {
		object-position: center;
	}

	.ugs-wrap .usl-hero::after {
		background: linear-gradient(to left, rgba(29, 12, 12, 0) 40.215%, rgba(29, 12, 12, .65) 69.633%, rgba(29, 12, 12, .84) 88.865%);
	}

	.ugs-wrap .usl-hero__shapes {
		display: block;
	}

	.ugs-wrap .usl-hero__inner {
		padding: 0 0 40px;
	}

	.ugs-wrap .usl-hero__copy {
		max-width: 296px;
	}

	.ugs-wrap .usl-hero__lead {
		font-size: 48px;
	}

	.ugs-wrap .usl-hero__serif {
		font-size: 60px;
	}

	.ugs-wrap .usl-hero__sub {
		font-size: 22px;
	}
}

/* The field photo strip sits close under its title */
.ugs-wrap .usl-field + .ugs-marquee {
	margin-top: 24px;
}

/* Bento: 1280 x 700 - wide + narrow on top (350), three across below (330).
   Three equal columns with the first photo spanning two lands within 6px of
   the design's 853 / 407 split. */
.ugs-wrap .usl-bento {
	--bento-w: 600px;
	flex: 0 0 auto;
	width: var(--bento-w);
	aspect-ratio: 1280 / 700;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-template-rows: 350fr 330fr;
	gap: calc(var(--bento-w) * 20 / 1280);
}

.ugs-wrap .usl-bento img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 0;
	object-fit: cover;
	border-radius: 16px;
	box-shadow: 0 4px 4px 4px rgba(0, 0, 0, .1);
}

.ugs-wrap .usl-bento img:first-child {
	grid-column: span 2;
}

@media (min-width: 1024px) {
	.ugs-wrap .usl-bento {
		--bento-w: 1280px;
	}

	.ugs-wrap .usl-bento img {
		border-radius: 30px;
	}
}

/* --------------------------------------------------------------- athletes */

.ugs-wrap .usl-athletes {
	position: relative;
	overflow: hidden;
	border-radius: 24px;
	background: #f9eec3;
}

.ugs-wrap .usl-athletes__photo {
	display: block;
	width: 100%;
	height: 220px;
	object-fit: cover;
	object-position: 72% 60%;
}

.ugs-wrap .usl-athletes__copy {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 28px;
	padding: 24px 20px 20px;
}

.ugs-wrap .usl-athletes__intro {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-width: 450px;
}

.ugs-wrap .usl-athletes__label {
	font-size: 12px;
	line-height: 1.5;
	font-weight: 400;
	text-transform: uppercase;
	color: rgba(186, 59, 65, .8);
}

.ugs-wrap .usl-athletes__title {
	display: block;
	font-size: 28px;
	font-weight: 300;
	line-height: 1.15;
	color: var(--ugs-ink);
}

.ugs-wrap .usl-athletes__title .ugs-serif {
	font-size: 1.22em;
	line-height: 1;
	color: var(--ugs-red);
}

.ugs-wrap .usl-athletes__text {
	font-size: 16px;
	line-height: 1.5;
	font-weight: 400;
	color: rgba(28, 20, 21, .8);
}

.ugs-wrap .usl-athletes__cards {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ugs-wrap .usl-athletes__card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 20px 16px;
	border-radius: 20px;
	background: rgba(126, 37, 41, .92);
	-webkit-backdrop-filter: blur(17px);
	backdrop-filter: blur(17px);
}

.ugs-wrap .usl-athletes__num {
	font-family: 'New York Large', 'New York', Georgia, serif;
	font-size: 30px;
	line-height: 1.2;
	color: var(--ugs-cream);
	margin-bottom: 4px;
}

.ugs-wrap .usl-athletes__card-title {
	display: block;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.33;
	color: var(--ugs-cream);
}

/* Figma title-cases only this card's title */
.ugs-wrap .usl-athletes__card--wide .usl-athletes__card-title {
	text-transform: capitalize;
}

.ugs-wrap .usl-athletes__card-text {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	color: #fff;
}

.ugs-wrap .usl-athletes__tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ugs-wrap .usl-athletes__tags li {
	padding: 6px 16px;
	border-radius: 40px;
	background: rgba(193, 68, 73, .54);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
	color: rgba(255, 255, 255, .8);
}

.ugs-wrap .usl-athletes__tags .usl-athletes__more {
	padding: 0;
	background: none;
	white-space: nowrap;
}

/* Below lg: copy and cards first, the photo underneath with the last card
   overlapping its top; cream fades into the photo, dark at the bottom. */
@media (max-width: 1023px) {
	.ugs-wrap .usl-athletes {
		display: flex;
		flex-direction: column;
		/* The wrap pads every child 16px; turn that into an outside gutter */
		margin-left: 16px;
		margin-right: 16px;
		padding-left: 0;
		padding-right: 0;
	}

	.ugs-wrap .usl-athletes__copy {
		order: 1;
		padding: 24px 20px 0;
	}

	.ugs-wrap .usl-athletes__photo {
		order: 2;
		height: 320px;
		margin-top: -28px;
		object-position: 72% 30%;
	}

	.ugs-wrap .usl-athletes::after {
		content: "";
		position: absolute;
		z-index: 1;
		left: 0;
		right: 0;
		bottom: 0;
		height: 320px;
		background: linear-gradient(#f9eec3 0%, rgba(249, 238, 195, 0) 22%, rgba(29, 12, 12, 0) 70%, rgba(29, 12, 12, .55) 100%);
		pointer-events: none;
	}

	.ugs-wrap .usl-athletes__cards {
		gap: 16px;
	}

	.ugs-wrap .usl-athletes__card {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		column-gap: 16px;
		row-gap: 12px;
		align-items: start;
		background: rgba(126, 37, 41, .7);
	}

	.ugs-wrap .usl-athletes__num {
		grid-row: 1 / span 3;
		margin: 0;
		line-height: 1.1;
	}

	.ugs-wrap .usl-athletes__card-title,
	.ugs-wrap .usl-athletes__card-text,
	.ugs-wrap .usl-athletes__tags {
		grid-column: 2;
	}
}

@media (min-width: 1024px) {
	.ugs-wrap .usl-athletes {
		height: 521px;
		border-radius: 30px;
		background: none;
	}

	.ugs-wrap .usl-athletes__photo {
		position: absolute;
		inset: 0;
		height: 100%;
		object-position: right bottom;
	}

	/* Cream fade over the left two-thirds */
	.ugs-wrap .usl-athletes::before {
		content: "";
		position: absolute;
		z-index: 1;
		inset: 0 auto 0 0;
		width: 66.1%;
		background: linear-gradient(90deg, #f9eec3 44.669%, rgba(249, 238, 195, 0) 98.877%);
	}

	/* Dark then red wash along the bottom edge */
	.ugs-wrap .usl-athletes::after {
		content: "";
		position: absolute;
		z-index: 1;
		inset: 0;
		background:
			linear-gradient(rgba(186, 59, 65, 0), rgba(186, 59, 65, .7)) left bottom / 100% 188px no-repeat,
			linear-gradient(rgba(38, 13, 13, 0), #200606) left 381px / 100% 188px no-repeat;
		pointer-events: none;
	}

	.ugs-wrap .usl-athletes__copy {
		height: 100%;
		justify-content: center;
		gap: 40px;
		padding: 0 40px;
	}

	.ugs-wrap .usl-athletes__title {
		font-size: 36px;
		line-height: 1;
	}

	.ugs-wrap .usl-athletes__cards {
		flex-direction: row;
		align-items: stretch;
		gap: 20px;
	}

	.ugs-wrap .usl-athletes__card {
		flex: 0 0 auto;
		gap: 0;
		background: rgba(126, 37, 41, .7);
	}

	.ugs-wrap .usl-athletes__num {
		margin-bottom: 16px;
	}

	.ugs-wrap .usl-athletes__card-title {
		margin-bottom: 12px;
	}

	.ugs-wrap .usl-athletes__card:nth-child(1) {
		width: 227px;
	}

	.ugs-wrap .usl-athletes__card:nth-child(2) {
		width: 207px;
	}

	.ugs-wrap .usl-athletes__card--wide {
		flex-shrink: 1;
		min-width: 0;
	}

	.ugs-wrap .usl-athletes__card--wide .usl-athletes__card-text {
		margin-bottom: 12px;
	}

}

/* Club card - common/partials/card-club.php, 414 x 360 design */
.ugs-wrap .usl-club {
	position: relative;
	container-type: inline-size;
	aspect-ratio: 414 / 360;
	overflow: hidden;
	border-radius: 20px;
	background: rgba(109, 24, 31, .23);
	color: #fff;
}

.ugs-wrap .usl-club__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ugs-wrap .usl-club::before {
	content: "";
	position: absolute;
	z-index: 1;
	inset: 0 0 auto;
	height: 51.7%;
	background: linear-gradient(rgb(var(--club-rgb)) 40%, rgba(var(--club-rgb), .9) 63%, rgba(var(--club-rgb), 0) 94%);
}

.ugs-wrap .usl-club__head {
	position: absolute;
	z-index: 2;
	top: 7.25cqw;
	left: 6.5cqw;
	right: 7.5cqw;
	display: flex;
	align-items: flex-start;
	gap: 2.9cqw;
}

.ugs-wrap .usl-club__icon {
	position: relative;
	flex: 0 0 11.6cqw;
	height: 16.9cqw;
	background: url("../images/ug-student-life/club-blob.webp") -1.69cqw -0.97cqw / 14.98cqw 18.6cqw no-repeat;
}

.ugs-wrap .usl-club__icon img {
	position: absolute;
	left: .97cqw;
	top: 3.14cqw;
	width: 9.66cqw;
	height: 9.42cqw;
}

.ugs-wrap .usl-club__copy {
	display: flex;
	flex-direction: column;
	gap: 1cqw;
	min-width: 0;
}

.ugs-wrap .usl-club__title {
	display: block;
	font-size: max(14px, 4.35cqw);
	font-weight: 600;
	line-height: 1.4;
	color: inherit;
}

.ugs-wrap .usl-club__text {
	font-size: max(12px, 3.38cqw);
	font-weight: 400;
	line-height: 1.5;
	color: inherit;
	opacity: .8;
}

.ugs-wrap .usl-club--dark {
	color: #000;
}

@media (min-width: 1024px) {
	.ugs-wrap .usl-club {
		border-radius: 30px;
	}
}

/* Student card - common/partials/card-student.php, 434 x 290 design */
.ugs-wrap .usl-student {
	--c1: #ba3b41;
	--c2: #c4565b;
	--outline: #e38a91;
	--ink: #fff;
	--copy-w: 45.4cqw;
	--dash-rot: 43.94deg;
	position: relative;
	container-type: inline-size;
	aspect-ratio: 434 / 290;
	overflow: hidden;
	border-radius: 20px;
	background: linear-gradient(90deg, var(--c1), var(--c2));
	color: var(--ink);
}

.ugs-wrap .usl-student--blue {
	--c1: #1c6fa7;
	--c2: #1e9ebb;
	--outline: #8ae3df;
}

.ugs-wrap .usl-student--green {
	--c1: #95ae20;
	--c2: #84a548;
	--outline: #d9e38a;
	--ink: #1c1415;
	--copy-w: 35cqw;
	--dash-rot: 37.58deg;
}

.ugs-wrap .usl-student--gold {
	--c1: #cf9d26;
	--c2: #daaf49;
	--outline: #e3c88a;
	--ink: #1c1415;
	--copy-w: 35cqw;
	--dash-rot: 37.58deg;
}

.ugs-wrap .usl-student__dash {
	position: absolute;
	left: var(--dash-left);
	top: var(--dash-top);
	width: 28.49cqw;
	height: 37.88cqw;
	max-width: none;
	transform: rotate(var(--dash-rot));
	pointer-events: none;
}

.ugs-wrap .usl-student__photo {
	position: absolute;
	right: 0;
	bottom: 0;
	width: var(--photo-w);
	height: var(--photo-h);
	max-width: none;
	filter: drop-shadow(.92cqw .92cqw 0 var(--outline));
}

.ugs-wrap .usl-student__copy {
	position: absolute;
	z-index: 1;
	left: 6.91cqw;
	top: 50%;
	transform: translateY(-50%);
	width: var(--copy-w);
	display: flex;
	flex-direction: column;
	gap: 1.84cqw;
}

.ugs-wrap .usl-student__name {
	display: block;
	padding-bottom: 1.84cqw;
	border-bottom: 1px solid color-mix(in srgb, var(--ink) 40%, transparent);
	font-size: max(14px, 4.15cqw);
	font-weight: 600;
	line-height: 1.5;
	color: var(--ink);
}

.ugs-wrap .usl-student__text {
	font-size: max(11px, 3.23cqw);
	font-weight: 400;
	line-height: 1.5;
	color: var(--ink);
}

/* ---------------------------------------------------------------- maverion */

/* Two blurred maroon glows behind the wordmark (pre-blurred PNG exports) */
.ugs-wrap .usl-maverion {
	position: relative;
	isolation: isolate;
}

.ugs-wrap .usl-maverion__glows {
	display: none;
}

@media (min-width: 1024px) {
	.ugs-wrap .usl-maverion__glows {
		display: block;
		position: absolute;
		z-index: -1;
		inset: 0;
		pointer-events: none;
	}

	.ugs-wrap .usl-maverion__glow {
		position: absolute;
		max-width: none;
	}

	.ugs-wrap .usl-maverion__glow--1 {
		left: -110px;
		top: -130px;
		width: 620px;
		height: auto;
	}

	.ugs-wrap .usl-maverion__glow--2 {
		left: 640px;
		top: -120px;
		width: 600px;
		height: auto;
	}
}

.ugs-wrap .usl-maverion__head {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ugs-wrap .usl-maverion__wordmark {
	display: block;
	margin: 0;
}

.ugs-wrap .usl-maverion__wordmark img {
	display: block;
	width: 100%;
	max-width: 888px;
	height: auto;
}

/* Dashed speech-bubble outline above the tagline (desktop only) */
.ugs-wrap .usl-maverion__bubble {
	display: none;
}

.ugs-wrap .usl-maverion__tagline {
	font-size: 20px;
	line-height: 1.5;
	font-weight: 400;
	color: rgba(255, 255, 255, .8);
}

.ugs-wrap .usl-maverion__grid {
	display: grid;
	gap: 20px;
	margin-top: 32px;
}

.ugs-wrap .usl-maverion__fest {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: 24px;
	aspect-ratio: 4 / 5;
	background: #fff;
}

.ugs-wrap .usl-maverion__fest-photo,
.ugs-wrap .usl-maverion__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
}

.ugs-wrap .usl-maverion__play {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.ugs-wrap .usl-maverion__caption {
	position: absolute;
	left: 24px;
	bottom: 24px;
	right: 24px;
	font-size: 30px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--ugs-ink);
}

.ugs-wrap .usl-maverion__caption span {
	padding: 0 7px;
	background: var(--ugs-cream);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.ugs-wrap .usl-maverion__stats {
	padding: 24px;
	border-radius: 24px;
	background:
		linear-gradient(90deg, rgba(255, 59, 75, .1) 0%, rgba(255, 59, 75, 0) 31.338%),
		linear-gradient(90.87deg, rgba(93, 30, 35, .4) 1.2029%, rgba(70, 17, 22, .4) 129.01%);
}

.ugs-wrap .usl-maverion__stats-title {
	display: block;
	margin-bottom: 24px;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--ugs-cream);
}

.ugs-wrap .usl-maverion__stats-title .ugs-light {
	color: #fff;
}

.ugs-wrap .usl-maverion__list {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin: 0;
}

.ugs-wrap .usl-maverion__stat {
	display: flex;
	flex-direction: column-reverse;
}

.ugs-wrap .usl-maverion__stat + .usl-maverion__stat {
	padding-top: 24px;
	border-top: 1px solid rgba(126, 62, 68, .5);
}

.ugs-wrap .usl-maverion__stat dd {
	margin: 0;
	font-size: 40px;
	font-weight: 500;
	line-height: 1.5;
	color: #ffaab1;
}

.ugs-wrap .usl-maverion__stat dd small {
	font-size: .58em;
}

.ugs-wrap .usl-maverion__stat dt {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	color: rgba(255, 255, 255, .8);
}

@media (min-width: 1024px) {
	.ugs-wrap .usl-maverion__head {
		position: relative;
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
	}

	.ugs-wrap .usl-maverion__bubble {
		display: block;
		position: absolute;
		top: -61px;
		right: 31px;
		width: 205px;
		height: 205px;
		pointer-events: none;
	}

	.ugs-wrap .usl-maverion__wordmark {
		flex: 0 1 888px;
	}

	.ugs-wrap .usl-maverion__tagline {
		flex: 0 0 auto;
		font-size: 32px;
		white-space: nowrap;
	}

	.ugs-wrap .usl-maverion__grid {
		grid-template-columns: repeat(3, minmax(0, 400px));
		justify-content: space-between;
		align-items: stretch;
		gap: 32px;
		margin-top: 80px;
	}

	.ugs-wrap .usl-maverion__fest {
		aspect-ratio: auto;
		height: 664px;
		border-radius: 30px;
	}

	.ugs-wrap .usl-maverion__caption {
		left: 32px;
		bottom: 32px;
		font-size: 40px;
		line-height: 1.14;
	}

	.ugs-wrap .usl-maverion__stats {
		border-radius: 30px;
	}

	.ugs-wrap .usl-maverion__stat dd {
		font-size: 48px;
	}
}

/* Collage marquee: six columns, each 544 design-px tall */
.ugs-wrap .ugs-marquee--maverion {
	--u: .55px;
	--marquee-gap: calc(10 * var(--u));
	--marquee-duration: 70s;
}

.ugs-wrap .usl-collage__col {
	display: grid;
	gap: calc(10 * var(--u));
	align-content: start;
}

.ugs-wrap .usl-collage__col--3 {
	grid-template-columns: auto auto;
}

.ugs-wrap .usl-collage__col--3 img:first-child {
	grid-column: span 2;
}

.ugs-wrap .usl-collage__col img {
	display: block;
	width: calc(var(--w) * var(--u));
	height: calc(var(--h) * var(--u));
	max-width: none;
	object-fit: cover;
	border-radius: 12px;
	box-shadow: 0 0 8px rgba(0, 0, 0, .25);
}

@media (min-width: 1024px) {
	.ugs-wrap .ugs-marquee--maverion {
		--u: 1px;
	}

	.ugs-wrap .usl-collage__col img {
		border-radius: 20px;
	}
}

/* ------------------------------------------------------------------ album */

.ugs-wrap .usl-album {
	position: relative;
	overflow: hidden;
	padding-top: 40px;
	background-position: center top;
	background-size: 1200px auto;
	background-repeat: no-repeat;
	text-align: center;
}

.ugs-wrap .usl-album__head {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 0 20px;
}

.ugs-wrap .usl-album__sub {
	font-size: 18px;
	font-weight: 400;
	line-height: 1.5;
	color: rgba(255, 255, 255, .8);
}

/* Below lg: a swipe carousel. Every card is the same size; the one in the
   centre (.is-current, set by the script in album.php) is full size and the
   rest are scaled down and dimmed. */
.ugs-wrap .usl-album__row {
	--card-w: min(64vw, 260px);
	--card-overlap: calc(var(--card-w) * -.125);
	position: relative;
	display: flex;
	align-items: center;
	gap: 0;
	margin: 0;
	padding: 28px calc(50% - var(--card-w) / 2 - var(--card-overlap));
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.ugs-wrap .usl-album__row::-webkit-scrollbar {
	display: none;
}

.ugs-wrap .usl-album__card {
	position: relative;
	flex: 0 0 auto;
	width: var(--card-w);
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border-radius: 16px;
	background: #d9d9d9;
	margin-inline: var(--card-overlap);
	scroll-snap-align: center;
	transform: scale(.8);
	filter: brightness(.6);
	transition: transform .35s ease, filter .35s ease;
}

@media (max-width: 1023px) {
	.ugs-wrap .usl-album__card.is-current {
		z-index: 1;
		transform: none;
		filter: none;
		box-shadow: 0 0 6px rgba(0, 0, 0, .2);
	}
}

.ugs-wrap .usl-album__card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ugs-wrap .usl-album__card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(rgba(44, 5, 7, 0) 82.5%, #2c0507);
}

.ugs-wrap .usl-album__label {
	position: absolute;
	z-index: 1;
	left: 12px;
	bottom: 12px;
	padding: 5px 16px;
	border-radius: 40px;
	background: rgba(193, 68, 73, .54);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--ugs-cream);
	white-space: nowrap;
}


.ugs-wrap .usl-album__cta {
	display: none;
}

@media (min-width: 1024px) {
	.ugs-wrap .usl-album {
		padding-top: 64px;
		background-size: 1800px auto;
		background-position: center -46px;
	}

	.ugs-wrap .usl-album__sub {
		font-size: 22px;
	}

	/* The 1441 x 470 Figma stage, scaled to the viewport (1cqw = 14.41 design px) */
	.ugs-wrap .usl-album__stage {
		container-type: inline-size;
		position: relative;
		max-width: 1441px;
		margin: 32px auto 0;
		aspect-ratio: 1441 / 470;
	}

	.ugs-wrap .usl-album__row {
		display: block;
		position: absolute;
		inset: 0;
		padding: 0;
		overflow: visible;
	}

	.ugs-wrap .usl-album__card {
		position: absolute;
		left: calc(var(--x) * 100cqw / 1441);
		top: calc(var(--y) * 100cqw / 1441);
		width: calc(var(--w) * 100cqw / 1441);
		height: calc(var(--h) * 100cqw / 1441);
		margin: 0;
		aspect-ratio: auto;
		transform: none;
		filter: none;
		transition: none;
	}

	.ugs-wrap .usl-album__card--d0 { opacity: 1; }
	.ugs-wrap .usl-album__card--d1 { opacity: .95; }
	.ugs-wrap .usl-album__card--d2 { opacity: .9; }
	.ugs-wrap .usl-album__card--d3 { opacity: .85; }

	.ugs-wrap .usl-album__card--d0 {
		z-index: 4;
		border: 1px solid rgba(186, 59, 65, .12);
		box-shadow: 0 0 6px rgba(0, 0, 0, .2);
	}

	.ugs-wrap .usl-album__card--d1 { z-index: 3; }
	.ugs-wrap .usl-album__card--d2 { z-index: 2; }
	.ugs-wrap .usl-album__card--d3 { z-index: 1; }

	.ugs-wrap .usl-album__card.is-left { box-shadow: -12px 0 6px rgba(0, 0, 0, .1); }
	.ugs-wrap .usl-album__card.is-right { box-shadow: 12px 0 6px rgba(0, 0, 0, .1); }
	.ugs-wrap .usl-album__card--d1.is-left { box-shadow: -12px 0 6px rgba(0, 0, 0, .2); }
	.ugs-wrap .usl-album__card--d1.is-right { box-shadow: 12px 0 6px rgba(0, 0, 0, .2); }

	.ugs-wrap .usl-album__cta {
		display: flex;
		justify-content: center;
		padding: 30px 20px 0;
	}
}