37 lines
1.2 KiB
CSS
37 lines
1.2 KiB
CSS
/* retoor <retoor@molodetz.nl> */
|
|
.gallery-intro { color: var(--ink-soft); max-width: 34em; margin: 0 0 var(--space-xl); }
|
|
|
|
.gallery {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: var(--space-xl) var(--space-lg);
|
|
}
|
|
|
|
.gallery figure { margin: 0; min-width: 0; }
|
|
|
|
.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%; height: auto; }
|
|
|
|
.gallery figcaption {
|
|
margin-top: var(--space-sm);
|
|
font-size: var(--text-base);
|
|
color: var(--ink-soft);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: var(--space-md);
|
|
}
|
|
|
|
.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: repeat(2, minmax(0, 1fr)); }
|
|
.gallery.memes { grid-template-columns: repeat(3, 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); }
|
|
}
|