/* Minimal, responsive, side-by-side images on a gradient background */ :root { --gap: clamp(12px, 4vw, 48px); --pad: clamp(12px, 4vw, 48px); } * { box-sizing: border-box; } html, body { height: 100%; /* Allow vertical scroll for pull-to-refresh, but avoid horizontal scrollbars */ overflow-x: hidden; } body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; background-color: transparent; } /* Mirror the background on so overscroll/pull-to-refresh areas are not white */ html { background-color: transparent; background-image: url('assets/gradient.png'); background-repeat: no-repeat; background-size: cover; background-position: center; -webkit-overflow-scrolling: touch; /* smooth scrolling and pull-to-refresh on iOS */ } .page { /* Use modern viewport units to avoid mobile UI causing extra space */ min-height: 100vh; /* fallback */ min-height: 100svh; /* small viewport height */ min-height: 100dvh; /* dynamic viewport height */ display: flex; align-items: center; /* vertical centering */ justify-content: center; /* horizontal centering */ padding: var(--pad); } .images { display: flex; flex-direction: row; /* Still side-by-side on mobile */ align-items: center; justify-content: center; gap: var(--gap); } .image { margin: 0; } .image img { display: block; width: min(42vw, 520px); max-height: 70vh; /* fallback */ max-height: 70svh; /* small viewport height */ max-height: 70dvh; /* dynamic viewport height */ height: auto; object-fit: contain; } @media (min-width: 1024px) { .image img { width: min(28vw, 640px); max-height: 80vh; /* fallback */ max-height: 80svh; /* small viewport height */ max-height: 80dvh; /* dynamic viewport height */ } } @media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto; } }