.cg-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 1rem;
	margin: 1.5rem 0;
}
.cg-card,
.cg-photo {
	display: block;
	position: relative;
	overflow: hidden;
	aspect-ratio: 1;
	background: #eee;
	text-decoration: none;
}
.cg-card img,
.cg-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}
.cg-card:hover img,
.cg-photo:hover img,
.cg-card:focus-visible img,
.cg-photo:focus-visible img { transform: scale(1.05); }
.cg-card-title {
	position: absolute;
	inset: auto 0 0 0;
	padding: .75rem 1rem;
	color: #fff;
	font-weight: 600;
	background: linear-gradient(transparent, rgba(0, 0, 0, .7));
}
.cg-breadcrumbs { font-size: .9em; margin-bottom: 1rem; }
.cg-breadcrumbs span { opacity: .5; margin: 0 .25em; }

/* Lightbox */
.cg-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, .92);
	color: #fff;
}
.cg-lightbox[hidden] { display: none; }
.cg-lightbox img {
	max-width: 92vw;
	max-height: 84vh;
	object-fit: contain;
	box-shadow: 0 0 40px rgba(0, 0, 0, .6);
}
.cg-lightbox figcaption { margin-top: .75rem; text-align: center; padding: 0 3rem; }
.cg-lightbox button,
.cg-slider button {
	position: absolute;
	background: rgba(0, 0, 0, .35);
	color: #fff;
	border: 0;
	font-size: 2.5rem;
	line-height: 1;
	width: 3rem;
	height: 3rem;
	cursor: pointer;
	border-radius: 50%;
}
.cg-lightbox button:hover,
.cg-slider button:hover { background: rgba(0, 0, 0, .6); }
.cg-lb-close { top: 1rem; right: 1rem; font-size: 2rem !important; }
.cg-lb-prev, .cg-slider-prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.cg-lb-next, .cg-slider-next { right: 1rem; top: 50%; transform: translateY(-50%); }
.cg-lb-counter { position: absolute; top: 1.4rem; left: 1.5rem; font-size: .85rem; opacity: .7; }

/* Slider */
.cg-slider {
	position: relative;
	aspect-ratio: 3 / 2;
	max-height: 75vh;
	width: 100%;
	overflow: hidden;
	background: #111;
}
.cg-slide {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	transition: opacity 1s ease;
}
.cg-slide.is-active { opacity: 1; }
.cg-slide img { width: 100%; height: 100%; object-fit: contain; }
.cg-slide figcaption {
	position: absolute;
	inset: auto 0 0 0;
	padding: .6rem 1rem;
	color: #fff;
	text-align: center;
	font-size: .9rem;
	background: linear-gradient(transparent, rgba(0, 0, 0, .6));
}
.cg-slider button { opacity: 0; transition: opacity .3s; }
.cg-slider:hover button,
.cg-slider button:focus-visible { opacity: 1; }