@media only screen and (min-width: 769px) {

	.ch---com-gallery-lightbox---container {
		display: none;
		position: fixed;
		z-index: 992229832;
		width: 100vw;
		height: 100vh;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: black;
	}
	
	.ch---com-gallery-lightbox---container > section {
		position: relative;
		width: 100%;
		height: 100%;
		padding: 0;
	}

	.ch---com-gallery-lightbox---container > section * {
		user-select: none !important;
	}

	.ch---com-gallery-lightbox---container > section > div:nth-child(1) {
		display: block;
		position: fixed;
		top: 0pt;
		right: 0pt;
		z-index: 992229834;
		width: 50pt;
		height: 50pt;
		padding: 10pt;
		cursor: pointer;
	}

	.ch---com-gallery-lightbox---container > section > div:nth-child(1) > svg {
		display: block;
		width: 30pt;
		height: 30pt;
		fill: white;
		transform: scale(0.6);
	}

	.ch---com-gallery-lightbox---container > section > div:nth-child(2) {
		display: flex;
		justify-content: space-between;
		gap: 10pt;
		background-color: black;
	}

	.ch---com-gallery-lightbox---container > section > div:nth-child(2) > div {
		position: absolute;
		z-index: 992229833;
		top: 0;
		bottom: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		height: calc(100vh - 50pt - 10pt);
		width: 50pt;
		height: 100%;
		padding: 0;
		cursor: pointer;
		text-align: center;
		transition: 0.15s;
	}

	.ch---com-gallery-lightbox---container > section > div:nth-child(2) > div:not(#ch-360-ch-viewer):hover {
		transform: scale(0.9);
	}

	.ch---com-gallery-lightbox---container > section > div:nth-child(2) > div > svg {
		display: block;
		transform: scale(0.5);
	}

	.ch---com-gallery-lightbox---container > section > div:nth-child(2) > img {
		display: block;
		width: 100%;
		height: calc(100vh - 50pt - 10pt);
		background-color: var(--color-dark);
		object-fit: contain !important;
		cursor: pointer;
	}

/*
*
*
*													P L A C E H O L D E R S
*
*
*/

	.ch---com-gallery-lightbox---container > section > div:nth-child(3) {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		padding-top: 10pt;
		height: 50pt;
		width: 100%;
		gap: 10pt;
		overflow-y: hidden;
		overflow-x: scroll;
	}

	.ch---com-gallery-lightbox---container > section > div:nth-child(3) > input {
		display: none !important;
	}

	.ch---com-gallery-lightbox---container > section > div:nth-child(3) > label {
		display: block;
		width: calc((100% - 10pt * 13) / 14);
		height: 25pt;
		overflow: hidden;
		cursor: pointer;
	}

	.ch---com-gallery-lightbox---container > section > div:nth-child(3) > label > img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		background-color: var(--color-dark);
		transition: 0.15s;
	}

	.ch---com-gallery-lightbox---container > section > div:nth-child(3) > label:hover > img,
	.ch---com-gallery-lightbox---container > section > div:nth-child(3) > input:checked + label > img {
		transform: scale(1.2);
		filter: grayscale(0.5);
		opacity: 0.5;
	}

}

@media only screen and (max-width: 768px) {

	.ch---com-gallery-lightbox---container {
		display: none;
		position: fixed;
		z-index: 992229832;
		width: 100vw;
		height: 100vh;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: black;
	}

	.ch---com-gallery-lightbox---container > section {
		position: relative;
		width: 100%;
		height: 100%;
		padding: 0;
	}

	.ch---com-gallery-lightbox---container > section * {
		user-select: none !important;
	}

	.ch---com-gallery-lightbox---container > section > div:nth-child(1) {
		display: block;
		position: fixed;
		top: 0pt;
		right: 0pt;
		z-index: 992229834;
		width: 50pt;
		height: 50pt;
		padding: 10pt;
		cursor: pointer;
	}

	.ch---com-gallery-lightbox---container > section > div:nth-child(1) > svg {
		display: block;
		width: 30pt;
		height: 30pt;
		fill: white;
		transform: scale(0.6);
	}

	.ch---com-gallery-lightbox---container > section > div:nth-child(2) {
		display: flex;
		justify-content: space-between;
		gap: 10pt;
		background-color: black;
	}

	.ch---com-gallery-lightbox---container > section > div:nth-child(2) > div {
		position: absolute;
		z-index: 992229833;
		top: 0;
		bottom: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		height: calc(100vh - 50pt - 10pt);
		width: 50pt;
		height: 100%;
		padding: 0;
		cursor: pointer;
		text-align: center;
		transition: 0.15s;
	}

	.ch---com-gallery-lightbox---container > section > div:nth-child(2) > div:hover {
		transform: scale(0.9);
	}

	.ch---com-gallery-lightbox---container > section > div:nth-child(2) > div > svg {
		display: block;
		transform: scale(0.5);
	}

	.ch---com-gallery-lightbox---container > section > div:nth-child(2) > img {
		display: block;
		width: 100vw !important;
		height: calc(100vh - 50pt - 10pt);
		background-color: var(--color-dark);
		cursor: pointer;
		object-fit: contain !important;
	}

/*
*
*
*													P L A C E H O L D E R S
*
*
*/

	.ch---com-gallery-lightbox---container > section > div:nth-child(3) {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		padding-top: 10pt;
		height: 50pt;
		width: 100%;
		gap: 10pt;
		overflow-y: hidden;
		overflow-x: scroll;
	}

	.ch---com-gallery-lightbox---container > section > div:nth-child(3) > input {
		display: none !important;
	}

	.ch---com-gallery-lightbox---container > section > div:nth-child(3) > label {
		display: block;
		width: calc((100% - 10pt * 13) / 14);
		height: 25pt;
		overflow: hidden;
		cursor: pointer;
	}

	.ch---com-gallery-lightbox---container > section > div:nth-child(3) > label > img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		background-color: var(--color-dark);
		transition: 0.15s;
	}

	.ch---com-gallery-lightbox---container > section > div:nth-child(3) > label:hover > img,
	.ch---com-gallery-lightbox---container > section > div:nth-child(3) > input:checked + label > img {
		transform: scale(1.2);
		filter: grayscale(0.5);
		opacity: 0.5;
	}

}