Gallery shows square memes and portrait flyers uncropped

molodetz/static/css/content.css

@@ -90,6 +90,7 @@
 
 .featured { margin: var(--space-xl) 0; border-top: var(--border); padding-top: var(--space-lg); }
 .featured figure { margin: 0; }
+.featured img { width: 100%; max-width: 480px; height: auto; border: var(--border); }
 .featured figcaption { font-family: var(--font-sans); font-size: var(--text-xs); color: var(--muted); margin-top: var(--space-sm); letter-spacing: 0.06em; }
 
 .closing { margin-top: var(--space-2xl); border-top: var(--border); padding-top: var(--space-lg); display: grid; gap: var(--space-md); }

molodetz/static/css/gallery.css

@@ -11,7 +11,7 @@
 
 .gallery a.frame { display: block; border: var(--border); background: var(--bg-sunken); cursor: zoom-in; }
 .gallery a.frame:hover { border-color: rgba(var(--accent-rgb), 0.7); }
-.gallery img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
+.gallery img { width: 100%; height: auto; }
 
 .gallery figcaption {
   margin-top: var(--space-sm);
@@ -24,8 +24,13 @@
 
 .gallery figcaption .index { font-family: var(--font-sans); font-size: var(--text-xs); color: var(--faint); letter-spacing: 0.08em; }
 
-.gallery.flyers { grid-template-columns: minmax(0, 1fr); }
+.gallery.flyers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+.gallery.memes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
 
-@media (max-width: 768px) {
-  .gallery { grid-template-columns: minmax(0, 1fr); }
+@media (max-width: 1024px) {
+  .gallery.memes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+}
+
+@media (max-width: 480px) {
+  .gallery.flyers, .gallery.memes { grid-template-columns: minmax(0, 1fr); }
 }

pyproject.toml

@@ -5,7 +5,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "molodetz"
-version = "1.0.8"
+version = "1.0.9"
 description = "Molodetz, a calm community blog roll."
 readme = "README.md"
 requires-python = ">=3.12"