1 files changed, 19 insertions, 2 deletions
diff --git a/src/style.css b/src/style.css
index e03ff14..f908a05 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1482,14 +1482,31 @@ body::after {
   overflow-anchor: none;
 }
 .mp-scroll::-webkit-scrollbar { display: none; }
-.mp-slide {
+/* a post: a screen tall, its pictures or clips in a row side by side */
+.mp-group {
   position: relative; height: 100vh; height: 100dvh; width: 100%;
   scroll-snap-align: start; scroll-snap-stop: always;
+}
+.mp-row {
+  display: flex; height: 100%; width: 100%; overflow-x: auto; overflow-y: hidden;
+  scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
+}
+.mp-row::-webkit-scrollbar { display: none; }
+.mp-slide {
+  position: relative; flex: 0 0 100%; height: 100%; width: 100%;
+  scroll-snap-align: start; scroll-snap-stop: always;
   display: flex; align-items: center; justify-content: center; overflow: hidden;
 }
+/* how many in this post, and which: dots along the top */
+.mp-dots {
+  position: absolute; left: 50%; transform: translateX(-50%); top: calc(max(10px, env(safe-area-inset-top)) + 16px);
+  display: flex; gap: 6px; z-index: 2; pointer-events: none;
+}
+.mp-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .38); box-shadow: 0 0 3px rgba(0, 0, 0, .5); transition: background .15s, transform .15s; }
+.mp-dots i.on { background: #fff; transform: scale(1.15); }
 .mp-media { max-width: 100%; max-height: 100%; width: 100%; height: 100%; object-fit: contain; display: block; user-select: none; -webkit-user-select: none; }
 /* a picture pinches to zoom (attachZoom); one finger at 1× is the pager's swipe */
-.mp-slide img.mp-media { touch-action: pan-y; transform-origin: center center; will-change: transform; }
+.mp-slide img.mp-media { touch-action: pan-x pan-y; transform-origin: center center; will-change: transform; }
 /* nothing but the picture until a tap */
 .mp-meta, .mp-top { opacity: 0; pointer-events: none; transition: opacity .18s; }
 .media-pager.show .mp-meta, .media-pager.show .mp-top { opacity: 1; pointer-events: auto; }