.sd-gallery {
	margin-block-end: 48px;
	max-width: 100%;
}

.sd-gallery__title {
	margin: 0 0 8px;
}

.sd-gallery__desc {
	margin: 0 0 16px;
}

.sd-gallery__video {
	margin: 20px 0 0;
	max-width: 100%;
}

.sd-gallery__video iframe {
	max-width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
}

/* Self-hosted video. wp_video_shortcode() prints a fixed pixel width both as an
   inline style on the .wp-video wrapper and as a width attribute on <video>, so
   on a narrow viewport it would push the page sideways. max-width caps it, and
   !important is required because the wrapper's width is an inline style. */
.sd-gallery__video .wp-video,
.sd-gallery__video .mejs-container {
	max-width: 100% !important;
	width: 100% !important;
}

.sd-gallery__video video {
	max-width: 100%;
	width: 100%;
	height: auto;
	display: block;
}

.sd-gallery__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	max-width: 100%;
}

.sd-gallery__grid a {
	display: block;
	line-height: 0;
	overflow: hidden;
	border-radius: 4px;
}

.sd-gallery__grid img {
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
}

.sd-gallery__grid a:hover img {
	transform: scale(1.04);
}