.pc-random-gallery {
	--pc-gallery-gap: clamp(4px, 1vw, 9px);
	--pc-gallery-radius: clamp(12px, 2vw, 24px);
	margin: 2rem auto;
	max-width: 820px;
}

.pc-random-gallery__title {
	margin: 0 0 1rem;
}

.pc-random-gallery__grid {
	aspect-ratio: 1 / 1;
	display: grid;
	gap: var(--pc-gallery-gap);
	grid-auto-flow: dense;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-template-rows: repeat(3, minmax(0, 1fr));
	overflow: hidden;
}

.pc-random-gallery__item {
	margin: 0;
	min-height: 0;
	min-width: 0;
	overflow: hidden;
	position: relative;
}

.pc-random-gallery__item--1 {
	border-top-left-radius: var(--pc-gallery-radius);
	grid-area: 1 / 1 / 2 / 2;
}

.pc-random-gallery__item--2 {
	border-top-right-radius: var(--pc-gallery-radius);
	clip-path: polygon(
		0 0,
		100% 0,
		100% 100%,
		calc(50% + var(--pc-gallery-gap) / 4) 100%,
		0 calc(50% - var(--pc-gallery-gap) / 4)
	);
	grid-area: 1 / 2 / 3 / 4;
}

.pc-random-gallery__item--3 {
	border-bottom-left-radius: var(--pc-gallery-radius);
	clip-path: polygon(
		0 0,
		calc(50% - var(--pc-gallery-gap) / 4) 0,
		100% calc(50% + var(--pc-gallery-gap) / 4),
		100% 100%,
		0 100%
	);
	grid-area: 2 / 1 / 4 / 3;
}

.pc-random-gallery__item--4 {
	border-bottom-right-radius: var(--pc-gallery-radius);
	grid-area: 3 / 3 / 4 / 4;
}

.pc-random-gallery__image-button,
.pc-random-gallery__image-static {
	background: none;
	border: 0;
	box-sizing: border-box;
	display: block;
	height: 100%;
	margin: 0;
	padding: 0;
	position: relative;
	width: 100%;
}

.pc-random-gallery__image-button {
	cursor: pointer;
}

.pc-random-gallery__image-button:focus-visible {
	outline: 4px solid currentColor;
	outline-offset: -5px;
}

.pc-random-gallery img {
	display: block;
	height: 100%;
	object-fit: cover;
	transform: scale(1.002);
	transition: filter .35s ease, transform .35s ease;
	width: 100%;
}

.pc-random-gallery--grayscale img {
	filter: grayscale(1);
}

.pc-random-gallery--grayscale .pc-random-gallery__image-button:hover img,
.pc-random-gallery--grayscale .pc-random-gallery__image-button:focus-visible img,
.pc-random-gallery--grayscale .pc-random-gallery__image-static:hover img {
	filter: grayscale(0);
}

.pc-random-gallery__image-button:hover img,
.pc-random-gallery__image-button:focus-visible img {
	transform: scale(1.035);
}

.pc-random-gallery__gps-badge {
	background: rgba(0, 0, 0, .68);
	border-radius: 999px;
	bottom: .65rem;
	color: #fff;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .08em;
	padding: .25rem .5rem;
	position: absolute;
	right: .65rem;
}

.pc-random-gallery__map-panel {
	background: var(--wp--preset--color--base, #fff);
	border: 1px solid rgba(32, 33, 36, .18);
	border-radius: 16px;
	box-sizing: border-box;
	margin-top: 1rem;
	overflow: hidden;
}

.pc-random-gallery__map-panel[hidden] {
	display: none;
}

.pc-random-gallery__map-header {
	align-items: center;
	display: flex;
	gap: 1rem;
	justify-content: space-between;
	padding: .75rem 1rem;
}

.pc-random-gallery__map-header strong,
.pc-random-gallery__map-header span {
	display: block;
}

.pc-random-gallery__map-header span {
	font-size: .82rem;
	opacity: .72;
}

.pc-random-gallery__map-close {
	align-items: center;
	background: transparent;
	border: 1px solid currentColor;
	border-radius: 50%;
	cursor: pointer;
	display: inline-flex;
	font-size: 1.25rem;
	height: 2rem;
	justify-content: center;
	line-height: 1;
	padding: 0;
	width: 2rem;
}

.pc-random-gallery__map {
	height: clamp(260px, 45vw, 430px);
	width: 100%;
}

.pc-random-gallery__notice {
	border: 1px solid currentColor;
	padding: 1rem;
}

.pc-random-gallery--count-1 .pc-random-gallery__item,
.pc-random-gallery--count-2 .pc-random-gallery__item,
.pc-random-gallery--count-3 .pc-random-gallery__item {
	border-radius: var(--pc-gallery-radius);
	clip-path: none;
}

.pc-random-gallery--count-1 .pc-random-gallery__item--1 {
	grid-area: 1 / 1 / 4 / 4;
}

.pc-random-gallery--count-2 .pc-random-gallery__item--1 {
	grid-area: 1 / 1 / 4 / 2;
}

.pc-random-gallery--count-2 .pc-random-gallery__item--2 {
	grid-area: 1 / 2 / 4 / 4;
}

.pc-random-gallery--count-3 .pc-random-gallery__item--1 {
	grid-area: 1 / 1 / 2 / 4;
}

.pc-random-gallery--count-3 .pc-random-gallery__item--2 {
	grid-area: 2 / 1 / 4 / 2;
}

.pc-random-gallery--count-3 .pc-random-gallery__item--3 {
	grid-area: 2 / 2 / 4 / 4;
}

@media (max-width: 600px) {
	.pc-random-gallery {
		--pc-gallery-gap: 4px;
		--pc-gallery-radius: 14px;
	}

	.pc-random-gallery__gps-badge {
		bottom: .4rem;
		right: .4rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pc-random-gallery img {
		transition: none;
	}
}