/* Project photo gallery: full images (no cropping), spacing between photos,
   vertical photos stay narrower than horizontal ones. Scoped to
   .project-gallery-grid so it never touches other sliders/galleries on the site. */
.project-gallery-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}
.project-gallery-grid .project-gallery-item {
	display: block;
	line-height: 0;
	border-radius: 4px;
	overflow: hidden;
	cursor: zoom-in;
	transition: opacity 0.25s ease;
}
.project-gallery-grid .project-gallery-item:hover {
	opacity: 0.9;
}
.project-gallery-grid .project-gallery-item img {
	display: block;
	height: 360px;
	width: auto;
	max-width: 100%;
}
@media only screen and (max-width: 767px) {
	.project-gallery-grid .project-gallery-item img {
		height: 240px;
	}
}
@media only screen and (max-width: 480px) {
	.project-gallery-grid {
		justify-content: center;
	}
	.project-gallery-grid .project-gallery-item img {
		height: auto;
		width: 100%;
	}
}


/* The theme ships swiper.min.js (carousel behavior) but never loads a matching
   swiper CSS file, so .swiper-wrapper/.swiper-slide have no flex layout at all --
   every Swiper carousel on the site (not just this gallery) renders as a stacked
   block list instead of a slider. This restores Swiper's own minimal structural
   CSS so every carousel on the site lays out and slides correctly. */
.swiper-wrapper {
	display: flex;
	position: relative;
	width: 100%;
	height: 100%;
	z-index: 1;
	box-sizing: content-box;
	transition-property: transform;
}
.swiper-slide {
	flex-shrink: 0;
	width: 100%;
	height: 100%;
	position: relative;
	transition-property: transform;
}