cs-gallery:not([fullscreen]) {
	text-align: left;
	display: grid;
	grid: auto-flow auto / repeat(auto-fill, minmax(204px, 1fr));
	gap: 12px 24px;
}

cs-gallery:not([fullscreen]) > cs-gallery-item:hover > img {
	width: 120%;
	height: 120%;
	margin-left: -12%;
	margin-top: -12%;
}

cs-gallery:not([fullscreen]) > cs-gallery-item {
	position: relative;
	overflow: hidden;
	border-color: var(--highlight-color);
	border-style: solid;
	border-width: 1px;
	background-color: rgb(255 255 255 / 20%);
	transition: all 0.6s ease-in-out;
	width: 212px;
	height: 163px;
	opacity: 0.2;
}

cs-gallery:not([fullscreen]):defined > cs-gallery-item {
	cursor: pointer;
	opacity: 1;
}

cs-gallery:not([fullscreen]) > cs-gallery-item::after {
	content: '';
	position: absolute;
	inset: 0;
	background-color: rgb(0 0 0 / 0%);
	border-style: solid;
	border-color: white;
	border-width: 8px;
}

cs-gallery:not([fullscreen]) > cs-gallery-item > img {
	display: block;
	width: 196px;
	height: 147px;
	padding: 8px;
	object-fit: cover;
	transition: all 0.2s ease-in-out;
}

cs-gallery:defined > cs-gallery-item:hover {
	opacity: 0.6;
}

@media (width <= 680px) {
	cs-gallery {
		justify-items: center;
	}
}