.wpcm-pg {
	--wpcm-pg-gap: 24px;
	--wpcm-pg-radius: 12px;
	--wpcm-pg-bg: #fff;
	--wpcm-pg-shadow: 0 5px 22px rgba(0,0,0,.08);
	width: 100%;
}

.wpcm-pg * { box-sizing: border-box; }

/*
 * WPCM's native gallery has changed markup slightly across releases.
 * These rules target the common gallery/list/table wrappers while leaving
 * WPCM's data/query logic untouched.
 */
.wpcm-pg .wpcm-player-gallery,
.wpcm-pg .wpcm-player-gallery ul,
.wpcm-pg ul.player-gallery,
.wpcm-pg .player-gallery {
	width: 100%;
}

.wpcm-pg .wpcm-player-gallery ul,
.wpcm-pg ul.player-gallery,
.wpcm-pg .player-gallery {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wpcm-pg-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.wpcm-pg .wpcm-player-gallery li,
.wpcm-pg ul.player-gallery > li,
.wpcm-pg .player-gallery > li {
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--wpcm-pg-bg);
	border-radius: var(--wpcm-pg-radius);
	overflow: hidden;
	box-shadow: var(--wpcm-pg-shadow);
	transition: transform .2s ease, box-shadow .2s ease;
}

.wpcm-pg .wpcm-player-gallery li:hover,
.wpcm-pg ul.player-gallery > li:hover,
.wpcm-pg .player-gallery > li:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 30px rgba(0,0,0,.14);
}

.wpcm-pg .wpcm-player-gallery img,
.wpcm-pg ul.player-gallery img,
.wpcm-pg .player-gallery img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	object-fit: cover;
}

.wpcm-pg .wpcm-player-gallery a,
.wpcm-pg ul.player-gallery a,
.wpcm-pg .player-gallery a {
	text-decoration: none;
}

@media (max-width: 900px) {
	.wpcm-pg .wpcm-player-gallery ul,
	.wpcm-pg ul.player-gallery,
	.wpcm-pg .player-gallery {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.wpcm-pg .wpcm-player-gallery ul,
	.wpcm-pg ul.player-gallery,
	.wpcm-pg .player-gallery {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px;
	}
}

.wpcm-pg__notice {
	padding: 16px;
	border: 1px solid #ddd;
}