/* =========================================================
   Selected Frames — faithful contained adaptation of the
   referenced Toshiya Marukubo canvas gallery.
   ========================================================= */

.selected-frames__header {
	margin-bottom: 3.5rem;
	max-width: 48rem;
}

.selected-frames__lede {
	font-family: var(--jl-sans);
	font-size: clamp(1.05rem, 1.3vw, 1.3rem);
	line-height: 1.55;
	margin: 1.6rem 0 0;
	max-width: 32rem;
}

/* =========================================================
   Selected Frames — Grid Gallery
   ========================================================= */

.jl-selected-grid {
	background: #080807;

	border: 1px solid rgba(255, 255, 255, 0.08);

	box-shadow:
		0 2.5rem 6rem
		rgba(35, 28, 23, 0.24);

	margin-left: 50%;

	max-width: 1720px;

	overflow: hidden;

	position: relative;

	transform: translateX(-50%);

	width: min(
		1720px,
		calc(100vw - 2rem)
	);
}


/* =========================================================
   INTRO
   ========================================================= */

.jl-selected-grid__intro {
	color: rgba(255, 255, 255, 0.82);
	padding: 1.75rem 2rem 0;
}

.jl-selected-grid__intro p,
.jl-selected-grid__intro span {
	font-family: var(--jl-sans);
	margin: 0;
	text-transform: uppercase;
}

.jl-selected-grid__intro p {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.17em;
}

.jl-selected-grid__intro span {
	display: block;
	font-size: 0.54rem;
	letter-spacing: 0.14em;
	margin-top: 0.45rem;
	opacity: 0.52;
}


/* =========================================================
   GRID
   ========================================================= */

.jl-selected-grid__items {
	display: grid;
	cursor: zoom-in;
	grid-template-columns:
		repeat(
			5,
			minmax(0, 1fr)
		);

	gap: 1rem;

	padding:
		2rem
		2rem
		2rem;
}

.jl-selected-grid__item {
	appearance: none;
	background: transparent;
	border: 0;
	cursor: zoom-in;
	display: block;
	margin: 0;
	overflow: hidden;
	padding: 0;
	position: relative;
	width: 100%;

	aspect-ratio: 1 / 1;
}

.jl-selected-grid__item img {
	display: block;
	cursor: zoom-in;
	height: 100%;
	object-fit: cover;
	width: 100%;

	transition:
		transform 350ms ease,
		opacity 350ms ease;
}

.jl-selected-grid__item:hover img {
	opacity: 0.88;
	transform: scale(1.025);
}


/* =========================================================
   LIGHTBOX
   ========================================================= */

.jl-selected-grid__lightbox {
	align-items: center;
	background: rgba(8, 8, 7, 0.96);
	display: flex;
	inset: 0;
	justify-content: center;
	opacity: 0;
	pointer-events: none;
	cursor: zoom-out;
	position: fixed;
	visibility: hidden;
	z-index: 9999;

	transition:
		opacity 220ms ease,
		visibility 220ms ease;
}

.jl-selected-grid__lightbox.is-open {
	opacity: 1;
	pointer-events: auto;
	visibility: visible;
}

.jl-selected-grid__glitch-canvas {
	display: block;
	cursor: zoom-out;
	max-height: 88vh;
	max-width: 90vw;
}

.jl-selected-grid__close {
	background: transparent;
	border: 0;
	color: #ffffff;
	cursor: pointer;
	font-family: var(--jl-sans);
	font-size: 2rem;
	line-height: 1;
	padding: 0;
	position: absolute;
	right: 2rem;
	top: 1.5rem;
	z-index: 2;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1199.98px) {

	.jl-selected-grid {
		width: calc(100vw - 2rem);
	}

	.jl-selected-grid__items {
		grid-template-columns:
			repeat(
				4,
				minmax(0, 1fr)
			);
	}

}

@media (max-width: 991.98px) {

	.jl-selected-grid {
		width: calc(100vw - 1.5rem);
	}

	.jl-selected-grid__items {
		grid-template-columns:
			repeat(
				3,
				minmax(0, 1fr)
			);
	}

}

@media (max-width: 767.98px) {

	.jl-selected-grid {
		width: calc(100vw - 1rem);
	}

	.jl-selected-grid__items {
		grid-template-columns:
			repeat(
				2,
				minmax(0, 1fr)
			);

		gap: 0.75rem;
		padding: 1rem;
	}

	.jl-selected-grid__intro {
		padding:
			1rem
			1rem
			0;
	}

	.jl-selected-grid__close {
		right: 1rem;
		top: 1rem;
	}

}

@media (max-width: 575.98px) {

	.jl-selected-grid {
		width: calc(100vw - 0.75rem);
	}

}