.jp-photo-bands { --jp-photo-height: clamp(220px, 19vw, 360px); --jp-photo-gap: 6px; width: 100%; overflow: hidden; display: grid; gap: var(--jp-photo-gap); }
.jp-photo-bands__row { width: 100%; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.jp-photo-bands__row:focus-visible { outline: 2px solid #ff3b30; outline-offset: -2px; }
.jp-photo-bands__track, .jp-photo-bands__group { display: flex; width: max-content; gap: var(--jp-photo-gap); }
.jp-photo-bands__group { flex: none; }
.jp-photo-bands__cell { flex: none; height: var(--jp-photo-height); width: calc(var(--jp-photo-height) * var(--jp-photo-ratio, 1.25)); overflow: hidden; }
.jp-photo-bands .jp-photo-bands__cell img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--jp-photo-position, center); }
.jp-photo-bands__row[data-animated] { overflow: hidden; }
.jp-photo-bands__row[data-animated] .jp-photo-bands__track { will-change: transform; }
@media (max-width: 767px) { .jp-photo-bands { --jp-photo-height: 190px; --jp-photo-gap: 4px; } }