@charset "utf-8";
/* CSS Document */

/*-------------------------------------------------------------*/
/*------------------       BASE SETUP      --------------------*/
/*-------------------------------------------------------------*/

* {
	box-sizing: border-box;
}

html,
body {
	width: 100%;
	max-width: 100%;
	margin: 0;
	background: #000;
	overflow-x: clip;
}



/*-------------------------------------------------------------*/
/*------------------       INTRO CELL      --------------------*/
/*-------------------------------------------------------------*/

.fun-gicon {
	margin-top: 0.5em;
	height: calc(0.6vw + 0.3rem);
}

.icon-row {
	display: grid;
	grid-template-columns: 5% 90%;
	column-gap: 5%;
}

.intro {
	font-size: calc(0.6vw + 0.3rem);
}


/*-------------------------------------------------------------*/
/*------------------       GALLERY GRID    --------------------*/
/*-------------------------------------------------------------*/

.gallery {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	background: #000;
	overflow: clip;
	contain: layout paint;
}

.gallery-cell {
	position: relative;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;
	overflow: hidden;
	min-width: 0;
}

.gallery-cell.no-right-border {
	border-right: 0;
}

.gallery-cell.text-cell {
	align-items: flex-start;
	justify-content: flex-start;
	padding: 10%;
	overflow: auto;
	scrollbar-color: white black;
}

.gallery .ptext,
.image-overlay .ptext {
	margin-top: 0;
	margin-left: 0;
	margin-right: 0;
}

.gallery-image {
	display: block;
	min-width: 0;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	cursor: zoom-in;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}

.gallery-image.small {
	width: 38%;
	height: 38%;
}

.gallery-image.medium {
	width: 52%;
	height: 52%;
}

.gallery-image.large {
	width: 66%;
	height: 66%;
}


/*-------------------------------------------------------------*/
/*------------------  GALLERY CAROUSEL ICON -------------------*/
/*-------------------------------------------------------------*/

.carousel-indicator {
	position: absolute;
	top: clamp(0.75rem, 1.6vw, 1.5rem);
	right: clamp(0.75rem, 1.6vw, 1.5rem);
	width: clamp(0.85rem, 1.25vw, 1.5rem);
	height: clamp(0.85rem, 1.25vw, 1.5rem);
	display: block;
	padding: 0;
	border: 0;
	background-color: transparent;
	background-image: url("../images/fun/test/nav/carousel-v0.svg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	cursor: zoom-in;
	z-index: 2;
}

.carousel-indicator:hover,
.carousel-indicator:focus-visible {
	background-image: url("../images/fun/test/nav/carousel_hover-v0.svg");
}


/*-------------------------------------------------------------*/
/*------------------       OVERLAY BASE    --------------------*/
/*-------------------------------------------------------------*/

.image-overlay {
	--overlay-pad-x: 5vw;
	--overlay-pad-y: clamp(2rem, 4vh, 4rem);
	--carousel-nav-space: calc(clamp(2.2rem, 3.5vw, 3.8rem) + clamp(0.75rem, 1.5vw, 1rem));

	position: fixed;
	inset: 0;
	z-index: 9999;
	display: none;
	padding: var(--overlay-pad-y) var(--overlay-pad-x);
	height: 100dvh;
	background: rgba(0, 0, 0, .96);
	overflow: hidden;
	cursor: default;
}

.image-overlay.active {
	display: flex;
	align-items: center;
	justify-content: center;
}

.overlay-inner {
	--caption-width: clamp(240px, 20vw, 360px);
	--overlay-gap: clamp(2rem, 4vw, 5rem);

	width: 100%;
	min-height: 100%;
	display: grid;
	grid-template-columns: var(--caption-width) minmax(0, 1fr) var(--caption-width);
	column-gap: var(--overlay-gap);
	align-items: center;
}

.overlay-media {
	grid-column: 2;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	pointer-events: auto;
	cursor: default;
}

.overlay-image-shell {
	position: relative;
	display: flex;
	justify-content: center;
	max-width: 100%;
}

.overlay-image {
	display: block;
	max-width: min(100%, 72vw);
	max-height: calc(100dvh - var(--overlay-pad-y) - var(--overlay-pad-y));
	object-fit: contain;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}

.image-overlay.has-carousel .overlay-image {
	max-width: min(100%, 68vw);
	max-height: calc(100dvh - var(--overlay-pad-y) - var(--overlay-pad-y) - var(--carousel-nav-space));
}

.overlay-caption {
	grid-column: 3;
	width: 100%;
	pointer-events: auto;
	cursor: default;
}


/*-------------------------------------------------------------*/
/*------------------       EXIT BUTTON     --------------------*/
/*-------------------------------------------------------------*/

.overlay-exit {
	position: fixed;
	top: clamp(1rem, 2vw, 2rem);
	right: clamp(1rem, 2vw, 2rem);
	width: clamp(2rem, 3vw, 3.25rem);
	aspect-ratio: 1 / 1;
	padding: 0;
	border: 0;
	background-color: transparent;
	background-image: url("../images/fun/test/nav/exit-v0.svg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	cursor: pointer;
	z-index: 10001;

}

.overlay-exit:hover,
.overlay-exit:focus-visible {
	background-image: url("../images/fun/test/nav/exit_hover-v0.svg");
}


/*-------------------------------------------------------------*/
/*------------------       CAROUSEL NAV    --------------------*/
/*-------------------------------------------------------------*/

.carousel-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(0.4rem, 0.8vw, 0.75rem);
	width: 100%;
	margin-top: clamp(0.75rem, 1.5vw, 1rem);
	pointer-events: auto;
	cursor: default;
}

.carousel-nav[hidden] {
	display: none !important;
}

.overlay-thumbnails {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: inherit;
	max-width: none;
	overflow: visible;
	padding: 0;
	margin: 0;
}

.overlay-thumbnails[hidden] {
	display: none !important;
}

.carousel-arrow {
	position: static;
	width: clamp(1.75rem, 2.8vw, 3.25rem);
	aspect-ratio: 1 / 1;
	flex: 0 0 auto;
	padding: 0;
	border: 0;
	background-color: transparent;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	cursor: pointer;
}

.carousel-arrow[hidden] {
	display: none !important;
}

.carousel-arrow.prev {
	background-image: url("../images/fun/test/nav/l_next_arrow-v0.svg");
}

.carousel-arrow.next {
	background-image: url("../images/fun/test/nav/r_next_arrow-v0.svg");
}

.carousel-arrow.prev:hover,
.carousel-arrow.prev:focus-visible {
	background-image: url("../images/fun/test/nav/l_next_arrow_hover-v0.svg");
}

.carousel-arrow.next:hover,
.carousel-arrow.next:focus-visible {
	background-image: url("../images/fun/test/nav/r_next_arrow_hover-v0.svg");
}

.carousel-thumb,
.carousel-more {
	width: clamp(2.2rem, 3.5vw, 3.8rem);
	aspect-ratio: 1 / 1;
	flex: 0 0 auto;
	padding: 0;
	border: 0;
	background-color: transparent;
	cursor: pointer;
}

.carousel-thumb {
	opacity: 0.4;
}

.carousel-thumb.active {
	opacity: 1;
}

.carousel-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}

.carousel-more {
	opacity: 1;
	background-image: url("../images/fun/test/nav/thumbnail-v0.svg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.carousel-more:hover,
.carousel-more:focus-visible {
	background-image: url("../images/fun/test/nav/thumbnail_hover-v0.svg");
}


/*-------------------------------------------------------------*/
/*------------------       BREAKPOINTS     --------------------*/
/*-------------------------------------------------------------*/

@media (max-width: 1600px) {
	.intro {
		font-size: 0.9vw;
	}

	.fun-gicon {
		height: 0.9vw;
	}

	.icon-row {
		grid-template-columns: 5% 90%;
		column-gap: 5%;
	}

	.gallery-cell.text-cell {
		padding: 8%;
	}
}

@media (max-width: 1300px), (max-aspect-ratio: 4 / 3) {
	.image-overlay {
		padding: clamp(4rem, 8vh, 6rem) 5vw 6vh;
		overflow-y: auto;
	}

	.image-overlay.active {
		align-items: stretch;
	}

	.overlay-inner {
		min-height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 1.25rem;
	}

	.overlay-media {
		width: 100%;
	}

	.overlay-image {
		max-width: 90vw;
		max-height: 68vh;
	}

	.image-overlay.has-carousel .overlay-image {
		max-width: 90vw;
		max-height: 52vh;
	}

	.overlay-caption {
		text-align: center;
		width: min(90vw, 420px);
	}

	.carousel-thumb,
	.carousel-more {
		width: clamp(2.2rem, 6vw, 3.5rem);
	}

	.carousel-arrow {
		width: clamp(2.3rem, 7vw, 3.5rem);
	}
}

@media (max-width: 1100px) {
	.intro {
		font-size: 1.3vw;
	}

	.fun-gicon {
		height: 1.3vw;
	}

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

@media (max-width: 700px) {
	.intro {
		font-size: 2.5vw;
	}

	.fun-gicon {
		height: 2.5vw;
	}

	.gallery {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.image-overlay {
		padding: clamp(4rem, 10vh, 5rem) 5vw 7vh;
	}

	.overlay-image {
		max-width: 90vw;
		max-height: 64vh;
	}

	.image-overlay.has-carousel .overlay-image {
		max-width: 90vw;
		max-height: 50vh;
	}

	.carousel-nav {
		gap: 0.75rem;
	}

	.carousel-thumb,
	.carousel-more {
		width: clamp(2.5rem, 9vw, 3.5rem);
	}

	.carousel-arrow {
		width: clamp(2.75rem, 11vw, 4rem);
	}
}

@media (max-width: 420px) {
	.intro {
		font-size: 4.5vw;
	}

	.fun-gicon {
		height: 4.5vw;
	}

	.gallery {
		grid-template-columns: 1fr;
	}

	.gallery-cell.text-cell {
		min-height: 100vw;
		padding: 15%;
	}

	.overlay-image {
		max-width: 88vw;
		max-height: 62vh;
	}

	.image-overlay.has-carousel .overlay-image {
		max-width: 88vw;
		max-height: 48vh;
	}
}