```css id="b7kz8p"
/* ================================
   THUMBNAIL GALLERY
   ================================ */

.gallery {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;

	width: 100%;
}



.gallery__item {
	width: calc((100% - 15px) / 5);
	aspect-ratio: 1 / 1;

	padding: 0;
	border: 0;

	background: #f3f3f3;

	overflow: hidden;
	cursor: pointer;
}

.gallery__item img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;

	transition: opacity 0.2s ease;
}

.gallery__item:hover img {
	opacity: 0.8;
}


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

.lightbox {
	position: fixed;
	inset: 0;

	z-index: 9999;

	display: none;

	width: 100%;
	height: 100%;

	background: rgba(0, 0, 0, 0.9);
}

.lightbox.is-open {
	display: block;
}


/* ================================
   SWIPER
   ================================ */

.lightbox__swiper {
	width: 100%;
	height: 100%;
}

.lightbox__swiper .swiper-slide {
	display: flex;

	align-items: center;
	justify-content: center;

	box-sizing: border-box;

	padding: 70px;
}


/* ================================
   IMAGE + DESCRIPTION
   ================================ */

.lightbox__figure {
	display: flex;

	flex-direction: column;

	align-items: center;
	justify-content: center;

	gap: 16px;

	margin: 0;

	max-width: 80vw;
	max-height: 80vh;
}

.lightbox__figure img {
	display: block;

	width: auto;
	height: auto;

	max-width: 80vw;
	max-height: 70vh;

	object-fit: contain;
}

.lightbox__figure figcaption {
	max-width: 600px;

	color: #fff;

	font-size: 15px;
	line-height: 1.5;

	text-align: center;
}


/* ================================
   CLOSE BUTTON
   ================================ */

.lightbox__close {
	position: absolute;

	top: 20px;
	right: 20px;

	z-index: 20;

	width: 44px;
	height: 44px;

	padding: 0;

	border: 0;
	border-radius: 50%;

	background: rgba(255, 255, 255, 0.12);

	color: #fff;

	font-size: 30px;
	line-height: 1;

	cursor: pointer;
}

.lightbox__close:hover {
	background: rgba(255, 255, 255, 0.22);
}


/* ================================
   SWIPER ARROWS
   ================================ */

.lightbox .swiper-button-prev,
.lightbox .swiper-button-next {
	color: #fff;
}

.lightbox .swiper-button-prev {
	left: 20px;
}

.lightbox .swiper-button-next {
	right: 20px;
}


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

@media (max-width: 700px) {

	.gallery__item {
		width: calc((100% - 14px) / 2);
	}

	.lightbox__swiper .swiper-slide {
		padding: 60px 20px;
	}

	.lightbox__figure {
		max-width: 90vw;
		max-height: 80vh;
	}

	.lightbox__figure img {
		max-width: 90vw;
		max-height: 65vh;
	}

}


@media (max-width: 450px) {

	.gallery__item {
		width: 100%;
	}

	.lightbox__swiper .swiper-slide {
		padding: 60px 15px;
	}

	.lightbox__figure img {
		max-width: 92vw;
		max-height: 60vh;
	}

}
```