/*
 * Photo Gallery RB — styles inside the gallery's shadow root.
 *
 * Not loaded as a file: PGRB_Renderer::css() cuts it at the "@part" markers
 * and inlines into each gallery only base + its layout + its hover effect
 * (+ filters / pager when used). Settings arrive as --pgrb-* custom
 * properties on :host.
 *
 * Note for editing: the minifier removes spaces around ":" and ">", so
 * never rely on a descendant combinator before a pseudo-class
 * (write ".items .item:hover", not ".items :hover").
 */

/* @part base */
:host {
	display: block;
	font-family: var(--pgrb-font);
	line-height: 1.4;
}
*, *::before, *::after { box-sizing: border-box; }
.pgrb {
	container: pgrb / inline-size;
	position: relative;
}
.items {
	--cols: var(--pgrb-cols);
	gap: var(--pgrb-gap);
}
@container pgrb (max-width: 1024px) { .items { --cols: var(--pgrb-cols-t); } }
@container pgrb (max-width: 600px)  { .items { --cols: var(--pgrb-cols-m); } }

.item {
	margin: 0;
	position: relative;
	min-width: 0;
	transition: opacity .6s ease, transform .6s ease;
}
.item[hidden] { display: none; }
.media {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: var(--pgrb-radius);
	color: inherit;
	text-decoration: none;
	background: rgba(127, 127, 127, .12);
	isolation: isolate;
	transform: translateZ(0);
}
a.media { cursor: zoom-in; }
a.media[data-action="link"] { cursor: pointer; }
.media:focus-visible {
	outline: 2px solid var(--pgrb-accent);
	outline-offset: 3px;
}
.media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease, filter .5s ease, opacity .5s ease;
}
.noimg { display: block; width: 100%; height: 100%; min-height: 120px; background: #222; }

/* the caption over the image; hover effects restyle it */
.cap {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	align-items: flex-end;
	padding: 1em 1.15em;
	color: var(--pgrb-text);
	pointer-events: none;
	background: linear-gradient(to top, var(--pgrb-overlay), transparent 75%);
	opacity: 0;
	transition: opacity .35s ease, background-color .35s ease;
}
.media:hover .cap, .media:focus-visible .cap { opacity: 1; }
.cap-in {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: .3em;
	max-width: 100%;
}
.cap-in:empty { display: none; }
.t {
	display: block;
	font-weight: 600;
	font-size: var(--pgrb-title-size);
	line-height: 1.25;
	overflow-wrap: anywhere;
}
.c {
	display: block;
	font-size: var(--pgrb-cap-size);
	line-height: 1.45;
	opacity: .9;
}
.below {
	display: flex;
	flex-direction: column;
	gap: .2em;
	padding: .65em .1em 0;
	color: var(--pgrb-below);
}
.below .c { opacity: .7; }

/* video badge */
.play {
	position: absolute;
	z-index: 2;
	top: 50%;
	left: 50%;
	width: 58px;
	height: 58px;
	margin: -29px 0 0 -29px;
	border-radius: 50%;
	background: rgba(0, 0, 0, .55);
	box-shadow: 0 0 0 2px rgba(255, 255, 255, .85);
	backdrop-filter: blur(4px);
	transition: transform .3s ease;
	pointer-events: none;
}
.play::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -10px 0 0 -6px;
	border-style: solid;
	border-width: 10px 0 10px 17px;
	border-color: transparent transparent transparent #fff;
}
.media:hover .play { transform: scale(1.1); }

.shadow-soft .media   { box-shadow: 0 4px 16px rgba(0, 0, 0, .12); }
.shadow-strong .media { box-shadow: 0 14px 34px rgba(0, 0, 0, .3); }

/* appear animation: JS adds .pre before observing, so without JS all is visible */
.pgrb[data-appear="fade"] .item.pre    { opacity: 0; }
.pgrb[data-appear="fade-up"] .item.pre { opacity: 0; transform: translateY(28px); }
.pgrb[data-appear="zoom"] .item.pre    { opacity: 0; transform: scale(.92); }

/* 3D tilt (JS sets --rx / --ry) */
.item.tilt .media {
	transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
	transition: transform .15s ease-out;
	will-change: transform;
}

/* touch screens have no hover: show captions right away */
@media (hover: none) {
	.cap { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}

/* @part filters */
.filters {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .5em;
	margin: 0 0 calc(var(--pgrb-gap) + 10px);
}
.filters button {
	font: inherit;
	font-size: 14px;
	color: inherit;
	cursor: pointer;
	border: 0;
	background: none;
	padding: .45em 1.05em;
	border-radius: 999px;
	transition: background-color .2s, color .2s, opacity .2s, border-color .2s;
}
.filters button:focus-visible { outline: 2px solid var(--pgrb-accent); outline-offset: 2px; }
.f-pills button { background: rgba(127, 127, 127, .13); }
.f-pills button:hover { background: rgba(127, 127, 127, .24); }
.f-pills button.on { background: var(--pgrb-accent); color: #fff; }
.f-underline button { border-radius: 0; padding: .4em .15em; margin: 0 .55em; border-bottom: 2px solid transparent; }
.f-underline button.on { border-color: var(--pgrb-accent); color: var(--pgrb-accent); }
.f-minimal button { opacity: .55; }
.f-minimal button:hover, .f-minimal button.on { opacity: 1; }
.f-minimal button.on { font-weight: 600; }

/* @part pager */
.pager {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .4em;
	margin-top: calc(var(--pgrb-gap) + 14px);
}
.pager button {
	font: inherit;
	cursor: pointer;
}
.more {
	padding: .75em 1.9em;
	border: 0;
	border-radius: 999px;
	background: var(--pgrb-accent);
	color: #fff;
	transition: opacity .2s, transform .2s;
}
.more:hover { transform: translateY(-1px); }
.more.loading { opacity: .6; pointer-events: none; }
.paged button {
	min-width: 2.5em;
	height: 2.5em;
	padding: 0 .6em;
	border-radius: 8px;
	border: 1px solid rgba(127, 127, 127, .3);
	background: none;
	color: inherit;
}
.paged button.on { background: var(--pgrb-accent); border-color: transparent; color: #fff; }

/* @part layout:grid */
.layout-grid {
	display: grid;
	grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
}
.layout-grid .media { aspect-ratio: var(--pgrb-aspect); }

/* @part layout:masonry */
/* without JS: CSS columns; with JS (.js): grid rows of 1px, each item spans its height */
.layout-masonry {
	columns: var(--cols);
	column-gap: var(--pgrb-gap);
}
.layout-masonry .item {
	break-inside: avoid;
	margin-bottom: var(--pgrb-gap);
}
.layout-masonry .media { aspect-ratio: var(--r); }
.layout-masonry.js {
	columns: auto;
	display: grid;
	grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
	grid-auto-rows: 1px;
	row-gap: 0;
	align-items: start;
}
.layout-masonry.js .item { margin-bottom: 0; }

/* @part layout:justified */
/* Pure CSS: grow and basis both proportional to the aspect ratio keep every row the same height. */
.layout-justified {
	display: flex;
	flex-wrap: wrap;
}
.layout-justified::after {
	content: "";
	flex-grow: 999999;
}
.layout-justified .item {
	flex-grow: calc(var(--r) * 100);
	flex-basis: calc(var(--r) * var(--pgrb-row-h));
}
.layout-justified .media { aspect-ratio: var(--r); }
@container pgrb (max-width: 600px) {
	.layout-justified .item { flex-basis: calc(var(--r) * var(--pgrb-row-h) * .55); }
}

/* @part layout:tiles */
.layout-tiles {
	--tiles-cols: 4;
	display: grid;
	grid-template-columns: repeat(var(--tiles-cols), minmax(0, 1fr));
	grid-auto-rows: calc((100cqw - (var(--tiles-cols) - 1) * var(--pgrb-gap)) / var(--tiles-cols));
	grid-auto-flow: dense;
}
.layout-tiles .item { display: flex; flex-direction: column; }
.layout-tiles .media { flex: 1; min-height: 0; }
@container pgrb (max-width: 600px) {
	.pgrb .layout-tiles { --tiles-cols: 2; }
}

/* @part layout:slider */
.stage { position: relative; }
.layout-slider {
	position: relative; /* slides' offsetLeft is then in scroll coordinates */
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}
.layout-slider::-webkit-scrollbar { display: none; }
.layout-slider .item {
	flex: 0 0 calc((100% - (var(--pgrb-per-view) - 1) * var(--pgrb-gap)) / var(--pgrb-per-view));
	scroll-snap-align: start;
}
.layout-slider .media { height: var(--pgrb-slider-h); }
@container pgrb (max-width: 600px) {
	.layout-slider .item { flex-basis: 100%; }
	.layout-slider .media { height: min(var(--pgrb-slider-h), 75cqw); }
}
/* one slide fills the track's content box (56% / 80% of the width, the padding
   centres it), its neighbours tilted in the padding beside it */
.fx-coverflow { perspective: 1400px; padding: 20px 22%; scroll-padding: 0 22%; }
.fx-coverflow .item { flex-basis: 100%; scroll-snap-align: center; transition: transform .45s ease, opacity .45s ease; }
@container pgrb (max-width: 600px) {
	.fx-coverflow { padding: 16px 10%; scroll-padding: 0 10%; }
	.fx-coverflow .item { flex-basis: 100%; }
}
.fx-fade { display: grid; overflow: hidden; }
.fx-fade .item { grid-area: 1 / 1; opacity: 0; transition: opacity .7s ease; pointer-events: none; }
.fx-fade .item.on, .fx-fade:not(.js) .item:first-child { opacity: 1; pointer-events: auto; }
.arrow {
	position: absolute;
	z-index: 3;
	top: 50%;
	width: 46px;
	height: 46px;
	margin-top: -23px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .9);
	box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
	cursor: pointer;
	transition: transform .2s, opacity .2s;
}
.arrow:hover { transform: scale(1.08); }
.arrow:disabled { opacity: 0; pointer-events: none; }
.arrow::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 10px;
	border: solid #1d1d1f;
	border-width: 0 2px 2px 0;
}
.prev { left: 14px; }
.next { right: 14px; }
.prev::after { transform: translate(-30%, -50%) rotate(135deg); }
.next::after { transform: translate(-70%, -50%) rotate(-45deg); }
.dots { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
.dots button {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 9px;
	background: currentColor;
	opacity: .25;
	cursor: pointer;
	transition: width .3s, opacity .3s, background-color .3s;
}
.dots button.on { width: 26px; opacity: 1; background: var(--pgrb-accent); }
.thumbs {
	position: relative;
	display: flex;
	gap: 8px;
	margin-top: 10px;
	overflow-x: auto;
	scrollbar-width: thin;
	padding-bottom: 4px;
}
.thumbs button {
	flex: 0 0 auto;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 6px;
	overflow: hidden;
	background: none;
	cursor: pointer;
	opacity: .6;
	transition: opacity .2s, border-color .2s;
}
.thumbs button.on { opacity: 1; border-color: var(--pgrb-accent); }
.thumbs img { display: block; width: 84px; height: 58px; object-fit: cover; }

/* ===== hover effects ===== */

/* @part hover:none */
.hv-none .cap { transition: none; }

/* @part hover:zoom */
.hv-zoom .media:hover img { transform: scale(1.08); }

/* @part hover:fade */
.hv-fade .cap { background: var(--pgrb-overlay); align-items: center; justify-content: center; text-align: center; }
.hv-fade .cap-in { transform: translateY(12px); transition: transform .4s ease; }
.hv-fade .media:hover .cap-in { transform: none; }

/* @part hover:slide-up */
.hv-slide-up .cap { opacity: 1; background: none; padding: 0; }
.hv-slide-up .cap-in { width: 100%; padding: .95em 1.15em; background: var(--pgrb-overlay); transform: translateY(101%); transition: transform .4s ease; }
.hv-slide-up .media:hover .cap-in { transform: none; }
.hv-slide-up .media:hover img { transform: translateY(-14px) scale(1.04); }

/* @part hover:grayscale */
.hv-grayscale img { filter: grayscale(1); }
.hv-grayscale .media:hover img { filter: none; transform: scale(1.04); }

/* @part hover:blur */
.hv-blur .cap { background: var(--pgrb-overlay); align-items: center; justify-content: center; text-align: center; }
.hv-blur .media:hover img { filter: blur(4px); transform: scale(1.08); }

/* Effects after this point are reworkings of Codrops' "Hover Effect Ideas"
   (Mary Lou, tympanus.net), rebuilt on this plugin's markup. They tint with
   the overlay color instead of fading the image over a fixed color. */

/* @part hover:lily */
.hv-lily .cap { opacity: 1; background: transparent; transition: background-color .35s; }
.hv-lily img { width: calc(100% + 50px); max-width: none; transform: translate3d(-40px, 0, 0); transition: transform .35s ease; }
.hv-lily .t, .hv-lily .c { transform: translate3d(0, 40px, 0); transition: transform .35s ease, opacity .35s ease; }
/* the title rests where the caption line is, inside the padding (alone: it stays) */
.hv-lily .t { transform: translate3d(0, calc(var(--pgrb-cap-size) * 1.45 + .3em), 0); }
.hv-lily .t:last-child { transform: none; }
.hv-lily .c { opacity: 0; transition-delay: .05s; }
.hv-lily .media:hover .cap { background: var(--pgrb-overlay); }
.hv-lily .media:hover img { transform: none; }
.hv-lily .media:hover .t, .hv-lily .media:hover .c { transform: none; opacity: 1; }

/* @part hover:sadie */
.hv-sadie .cap { opacity: 1; background: none; align-items: center; justify-content: center; text-align: center; }
.hv-sadie .cap::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent, var(--pgrb-overlay) 75%); opacity: 0; transform: translate3d(0, 50%, 0); transition: opacity .35s, transform .35s; }
.hv-sadie .t { transform: translate3d(0, 24px, 0); transition: transform .35s; }
.hv-sadie .c { opacity: 0; transform: translate3d(0, 12px, 0); transition: opacity .35s, transform .35s; }
.hv-sadie .media:hover .cap::before { opacity: 1; transform: none; }
.hv-sadie .media:hover .t, .hv-sadie .media:hover .c { opacity: 1; transform: none; }

/* @part hover:honey */
.hv-honey .cap { opacity: 1; background: transparent; transition: background-color .35s; }
.hv-honey .cap::before { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 8px; background: var(--pgrb-accent); transform: translate3d(0, 8px, 0); transition: transform .35s; }
.hv-honey .cap-in { padding-bottom: 8px; }
.hv-honey .t, .hv-honey .c { opacity: 0; transform: translate3d(0, -24px, 0); transition: opacity .35s, transform .35s; }
.hv-honey .media:hover .cap { background: var(--pgrb-overlay); }
.hv-honey .media:hover .cap::before { transform: none; }
.hv-honey .media:hover .t, .hv-honey .media:hover .c { opacity: 1; transform: none; }

/* @part hover:layla */
.hv-layla .cap { opacity: 1; background: transparent; padding: 2.5em; align-items: center; justify-content: center; text-align: center; transition: background-color .35s; }
.hv-layla img { transform: translate3d(0, -14px, 0) scale(1.08); transition: transform .35s; }
.hv-layla .cap::before, .hv-layla .cap::after { content: ""; position: absolute; opacity: 0; transition: opacity .35s, transform .35s; }
.hv-layla .cap::before { inset: 16px 30px; border-top: 1px solid var(--pgrb-text); border-bottom: 1px solid var(--pgrb-text); transform: scale(0, 1); transform-origin: 0 0; }
.hv-layla .cap::after { inset: 30px 16px; border-left: 1px solid var(--pgrb-text); border-right: 1px solid var(--pgrb-text); transform: scale(1, 0); transform-origin: 100% 0; }
.hv-layla .t { transform: translate3d(0, 12px, 0); transition: transform .35s; }
.hv-layla .c { opacity: 0; transform: translate3d(0, -10px, 0); transition: opacity .35s, transform .35s; }
.hv-layla .media:hover .cap { background: var(--pgrb-overlay); }
.hv-layla .media:hover img { transform: none; }
.hv-layla .media:hover .cap::before, .hv-layla .media:hover .cap::after { opacity: 1; transform: scale(1); }
.hv-layla .media:hover .t, .hv-layla .media:hover .c { opacity: 1; transform: none; }

/* @part hover:zoe */
.hv-zoe .cap { opacity: 1; background: none; padding: 0; }
.hv-zoe .cap-in { width: 100%; padding: .9em 1.15em; background: #fff; color: #1d1d1f; border-left: 4px solid var(--pgrb-accent); transform: translate3d(0, 101%, 0); transition: transform .35s; }
.hv-zoe .c { opacity: 0; transition: opacity .35s .1s; }
.hv-zoe .media:hover .cap-in { transform: none; }
.hv-zoe .media:hover .c { opacity: .8; }
.hv-zoe .media:hover img { transform: translate3d(0, -20px, 0); }

/* @part hover:oscar */
.hv-oscar .cap { opacity: 1; background: var(--pgrb-overlay); padding: 2.4em; align-items: center; justify-content: center; text-align: center; }
.hv-oscar .cap::before { content: ""; position: absolute; inset: 20px; border: 1px solid var(--pgrb-text); opacity: 0; transform: scale(0); transition: opacity .35s, transform .35s; }
.hv-oscar .t { transform: translate3d(0, 60%, 0); transition: transform .35s; }
.hv-oscar .c { opacity: 0; transform: scale(0); transition: opacity .35s, transform .35s; }
.hv-oscar .media:hover img { transform: scale(1.06); }
.hv-oscar .media:hover .cap::before { opacity: 1; transform: scale(1); }
.hv-oscar .media:hover .t { transform: none; }
.hv-oscar .media:hover .c { opacity: 1; transform: scale(1); }

/* @part hover:marley */
.hv-marley .cap { opacity: 1; background: transparent; justify-content: flex-end; text-align: right; transition: background-color .35s; }
.hv-marley .cap-in { align-items: flex-end; }
.hv-marley .t { transform: translate3d(0, 20px, 0); transition: transform .35s; }
.hv-marley .t::after { content: ""; display: block; height: 3px; margin-top: .45em; background: var(--pgrb-text); opacity: 0; transform: translate3d(0, 30px, 0); transition: opacity .35s, transform .35s; }
.hv-marley .c { opacity: 0; transform: translate3d(0, 100%, 0); transition: opacity .35s, transform .35s; }
.hv-marley .media:hover .cap { background: var(--pgrb-overlay); }
.hv-marley .media:hover .t, .hv-marley .media:hover .t::after, .hv-marley .media:hover .c { opacity: 1; transform: none; }

/* @part hover:ruby */
.hv-ruby img { transform: scale(1.15); transition: transform .35s; }
.hv-ruby .cap { opacity: 1; background: transparent; padding: 2em; align-items: center; justify-content: center; text-align: center; transition: background-color .35s; }
.hv-ruby .t { transform: translate3d(0, 20px, 0); transition: transform .35s; }
.hv-ruby .c { margin-top: .6em; padding: .8em 1em; border: 1px solid var(--pgrb-text); opacity: 0; transform: translate3d(0, 20px, 0) scale(1.1); transition: opacity .35s, transform .35s; }
.hv-ruby .media:hover img { transform: scale(1); }
.hv-ruby .media:hover .cap { background: var(--pgrb-overlay); }
.hv-ruby .media:hover .t, .hv-ruby .media:hover .c { opacity: 1; transform: none; }

/* @part hover:roxy */
.hv-roxy img { width: calc(100% + 60px); max-width: none; transform: translate3d(-50px, 0, 0); transition: transform .35s; }
.hv-roxy .cap { opacity: 1; background: transparent; padding: 2.6em 3em; align-items: center; transition: background-color .35s; }
.hv-roxy .cap::before { content: ""; position: absolute; inset: 28px; border: 1px solid var(--pgrb-text); opacity: 0; transform: translate3d(-20px, 0, 0); transition: opacity .35s, transform .35s; }
.hv-roxy .t, .hv-roxy .c { opacity: 0; transform: translate3d(-10px, 0, 0); transition: opacity .35s, transform .35s; }
.hv-roxy .media:hover img { transform: none; }
.hv-roxy .media:hover .cap { background: var(--pgrb-overlay); }
.hv-roxy .media:hover .cap::before, .hv-roxy .media:hover .t, .hv-roxy .media:hover .c { opacity: 1; transform: none; }

/* @part hover:bubba */
.hv-bubba .cap { opacity: 1; background: transparent; padding: 2.6em; align-items: center; justify-content: center; text-align: center; transition: background-color .35s; }
.hv-bubba .cap::before, .hv-bubba .cap::after { content: ""; position: absolute; inset: 24px; opacity: 0; transition: opacity .35s, transform .35s; }
.hv-bubba .cap::before { border-top: 1px solid var(--pgrb-text); border-bottom: 1px solid var(--pgrb-text); transform: scale(0, 1); }
.hv-bubba .cap::after { border-left: 1px solid var(--pgrb-text); border-right: 1px solid var(--pgrb-text); transform: scale(1, 0); }
.hv-bubba .t { transform: translate3d(0, -16px, 0); transition: transform .35s; }
.hv-bubba .c { opacity: 0; transform: translate3d(0, 16px, 0); transition: opacity .35s, transform .35s; }
.hv-bubba .media:hover .cap { background: var(--pgrb-overlay); }
.hv-bubba .media:hover .cap::before, .hv-bubba .media:hover .cap::after { opacity: 1; transform: scale(1); }
.hv-bubba .media:hover .t, .hv-bubba .media:hover .c { opacity: 1; transform: none; }

/* @part hover:romeo */
.hv-romeo .cap { opacity: 1; background: transparent; align-items: center; justify-content: center; text-align: center; transition: background-color .35s; }
.hv-romeo .cap::before, .hv-romeo .cap::after { content: ""; position: absolute; top: 50%; left: 10%; width: 80%; height: 1px; background: var(--pgrb-text); opacity: 0; transition: opacity .35s, transform .35s; }
.hv-romeo .cap::before { transform: translate3d(0, -40px, 0) scaleX(0); }
.hv-romeo .cap::after { transform: translate3d(0, 40px, 0) scaleX(0); }
.hv-romeo .t { transform: translate3d(0, -.4em, 0); transition: transform .35s; }
.hv-romeo .c { opacity: 0; transform: translate3d(0, .8em, 0); transition: opacity .35s, transform .35s; }
.hv-romeo .media:hover img { transform: scale(1.1); }
.hv-romeo .media:hover .cap { background: var(--pgrb-overlay); }
.hv-romeo .media:hover .cap::before { opacity: .5; transform: rotate(45deg); }
.hv-romeo .media:hover .cap::after { opacity: .5; transform: rotate(-45deg); }
.hv-romeo .media:hover .t, .hv-romeo .media:hover .c { opacity: 1; transform: none; }

/* @part hover:sarah */
.hv-sarah img { width: calc(100% + 20px); max-width: none; transition: transform .35s; }
.hv-sarah .cap { opacity: 1; background: transparent; padding: 1.8em; align-items: flex-start; text-align: left; transition: background-color .35s; }
.hv-sarah .t { overflow: hidden; padding-bottom: .5em; }
.hv-sarah .t::after { content: ""; display: block; height: 3px; margin-top: .45em; background: var(--pgrb-text); transform: translate3d(-101%, 0, 0); transition: transform .35s; }
.hv-sarah .c { opacity: 0; transform: translate3d(100%, 0, 0); transition: opacity .35s, transform .35s; }
.hv-sarah .media:hover img { transform: translate3d(-10px, 0, 0); }
.hv-sarah .media:hover .cap { background: var(--pgrb-overlay); }
.hv-sarah .media:hover .t::after, .hv-sarah .media:hover .c { opacity: 1; transform: none; }

/* @part hover:chico */
.hv-chico img { transform: scale(1.12); transition: transform .35s; }
.hv-chico .cap { opacity: 1; background: transparent; padding: 3em; align-items: center; justify-content: center; text-align: center; transition: background-color .35s; }
.hv-chico .cap::before { content: ""; position: absolute; inset: 15px; border: 1px solid var(--pgrb-text); opacity: 0; transform: scale(1.1); transition: opacity .35s, transform .35s; }
.hv-chico .c { opacity: 0; transform: scale(1.5); transition: opacity .35s, transform .35s; }
.hv-chico .media:hover img { transform: scale(1); }
.hv-chico .media:hover .cap { background: var(--pgrb-overlay); }
.hv-chico .media:hover .cap::before, .hv-chico .media:hover .c { opacity: 1; transform: scale(1); }

/* @part hover:milo */
.hv-milo img { transform: scale(1.12); transition: transform .45s; }
.hv-milo .cap { opacity: 1; background: transparent; justify-content: flex-end; text-align: right; transition: background-color .35s; }
.hv-milo .cap-in { align-items: flex-end; padding-right: .8em; border-right: 2px solid transparent; transition: border-color .35s; }
.hv-milo .c { opacity: 0; transform: translate3d(-30px, 0, 0); transition: opacity .35s, transform .35s; }
.hv-milo .media:hover img { transform: scale(1.2) rotate(-3deg); }
.hv-milo .media:hover .cap { background: var(--pgrb-overlay); }
.hv-milo .media:hover .cap-in { border-color: var(--pgrb-text); }
.hv-milo .media:hover .c { opacity: 1; transform: none; }

/* @part hover:selena */
.hv-selena .media { background: var(--pgrb-overlay); }
.hv-selena img { transition: transform .4s, border-radius .4s; }
.hv-selena .cap { opacity: 1; background: none; align-items: center; justify-content: center; text-align: center; }
.hv-selena .t { opacity: 0; transition: opacity .35s; }
.hv-selena .c { opacity: 0; transform: perspective(1000px) rotate3d(1, 0, 0, 90deg); transform-origin: 50% 0; transition: opacity .35s, transform .35s; }
.hv-selena .media:hover img { transform: scale(.88); border-radius: calc(var(--pgrb-radius) + 4px); filter: brightness(.6); }
.hv-selena .media:hover .t { opacity: 1; }
.hv-selena .media:hover .c { opacity: 1; transform: perspective(1000px) rotate3d(1, 0, 0, 0deg); }

/* @part hover:apollo */
.hv-apollo img { transform: scale(1.08); transition: transform .35s; }
.hv-apollo .cap { opacity: 1; background: linear-gradient(to top, var(--pgrb-overlay), transparent 70%); justify-content: flex-end; text-align: right; }
.hv-apollo .cap::before { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, .45); transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -101%, 0); transition: transform .6s; }
.hv-apollo .cap-in { align-items: flex-end; }
.hv-apollo .c { opacity: 0; padding-right: .7em; border-right: 4px solid var(--pgrb-text); transition: opacity .35s; }
.hv-apollo .media:hover img { transform: scale(1); }
.hv-apollo .media:hover .cap::before { transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 101%, 0); }
.hv-apollo .media:hover .c { opacity: 1; transition-delay: .1s; }

/* @part hover:steve */
.hv-steve .media { overflow: visible; background: none; transition: transform .35s, box-shadow .35s; }
.hv-steve img { border-radius: var(--pgrb-radius); }
.hv-steve .cap { opacity: 1; background: none; padding: 0 1em 1em; }
.hv-steve .cap-in { padding: .7em 1em; background: #fff; color: #1d1d1f; border-radius: calc(var(--pgrb-radius) * .6); opacity: 0; transform: translate3d(0, 12px, 0); transition: opacity .35s, transform .35s; }
.hv-steve .media:hover { transform: translate3d(0, -8px, 0); box-shadow: 0 18px 36px rgba(0, 0, 0, .35); }
.hv-steve .media:hover .cap-in { opacity: 1; transform: none; }

/* @part hover:jazz */
.hv-jazz .cap { opacity: 1; background: transparent; align-items: center; justify-content: center; text-align: center; transition: background-color .35s; }
.hv-jazz .cap::after { content: ""; position: absolute; inset: 0; border-top: 1px solid var(--pgrb-text); border-bottom: 1px solid var(--pgrb-text); opacity: 0; transform: rotate3d(0, 0, 1, 45deg) scale3d(1, 0, 1); transition: opacity .35s, transform .35s; }
.hv-jazz .t, .hv-jazz .c { opacity: 0; transform: scale3d(.8, .8, 1); transition: opacity .35s, transform .35s; }
.hv-jazz .media:hover img { transform: scale(1.1); }
.hv-jazz .media:hover .cap { background: var(--pgrb-overlay); }
.hv-jazz .media:hover .cap::after { opacity: 1; transform: rotate3d(0, 0, 1, 45deg) scale3d(1, 1, 1); }
.hv-jazz .media:hover .t, .hv-jazz .media:hover .c { opacity: 1; transform: none; }

/* @part hover:ming */
.hv-ming .cap { opacity: 1; background: transparent; padding: 2.6em; align-items: center; justify-content: center; text-align: center; transition: background-color .35s; }
.hv-ming .cap::before { content: ""; position: absolute; inset: 24px; border: 2px solid var(--pgrb-text); box-shadow: 0 0 0 30px rgba(255, 255, 255, .18); opacity: 0; transform: scale3d(1.4, 1.4, 1); transition: opacity .35s, transform .35s; }
.hv-ming .c { opacity: 0; transform: scale(1.4); transition: opacity .35s, transform .35s; }
.hv-ming .media:hover img { filter: blur(2px); transform: scale(1.05); }
.hv-ming .media:hover .cap { background: var(--pgrb-overlay); }
.hv-ming .media:hover .cap::before, .hv-ming .media:hover .c { opacity: 1; transform: none; }

/* @part hover:duke */
.hv-duke .cap { opacity: 1; background: transparent; padding: 2em; align-items: center; justify-content: center; text-align: center; transition: background-color .35s; }
.hv-duke .t { opacity: 0; transform: scale(1.6); transition: opacity .35s, transform .35s; }
.hv-duke .c { margin-top: .5em; padding: .5em .9em; border: 2px dashed var(--pgrb-text); opacity: 0; transform: translate3d(0, 24px, 0); transition: opacity .35s .05s, transform .35s .05s; }
.hv-duke .media:hover img { transform: scale(1.4); }
.hv-duke .media:hover .cap { background: var(--pgrb-overlay); }
.hv-duke .media:hover .t, .hv-duke .media:hover .c { opacity: 1; transform: none; }