/* ============================================================
   HIMBODIED DUO - look of the two-photo grid shot's page (hb-duo.js, single-gridshot.php)
   The first photo fills the width of the post area and sets the height; the second takes that height, so its
   width follows its own ratio, and sits right against it: the strip scrolls sideways (finger, mouse drag, arrows).
   The page frame (no site header, Gallery link), arrows, Related and comments are shared with hb-pan.css.
   ============================================================ */
.hb-duo { position: relative; width: 100%; margin: 0 auto; }
.hb-duo__frame { display: flex; width: 100%; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; background: #050505; cursor: grab; outline: none; user-select: none; -webkit-user-select: none; }
.hb-duo__frame::-webkit-scrollbar { display: none; }
.hb-duo__frame:focus-visible { box-shadow: 0 0 0 2px #0b0b0b, 0 0 0 3px #f5f5f5; }
.hb-duo__frame.is-moving { cursor: grabbing; }
.hb-duo__photo { display: block; flex: none; height: 100%; max-width: none; max-height: none; object-fit: cover; }
.hb-duo__photo--a { width: 100%; }
.hb-duo__photo--b { width: auto; }

/* Phone and small tablet: edge to edge, like Instagram (the page has a 16px side margin to cancel) */
@media (max-width: 720px) {
	.hb-duo { width: calc(100% + 32px); margin-left: -16px; margin-right: -16px; }
}
/* Desktop: the arrows sit beside the photos, not on them (on a phone they stay on the edge of the photo) */
@media (min-width: 900px) {
	.hb-duo .hb-pan__hint[data-d="W"] { left: -56px; }
	.hb-duo .hb-pan__hint[data-d="E"] { right: -56px; }
}