html, body { height: 100%; }
.bc { min-height: 100vh; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 16px; padding: 24px; }
.bc-big { margin: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; place-items: center; gap: 8px; min-height: 0; }
.bc-big img { display: block; max-width: 100%; max-height: 100%; min-height: 0; object-fit: contain; }
.bc-big figcaption { font-size: 12px; line-height: 16px; color: var(--rd-ink3); }
.bc-strip { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; }
.bc-thumb { display: grid; gap: 4px; padding: 6px; border: 0; border-radius: 8px; background: transparent; color: var(--rd-ink2); font: var(--rd-w-ui) 11px/14px var(--font); text-align: left; cursor: default; transition: background-color 50ms var(--rd-ease); }
.bc-thumb img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: contain; background: #fff; border-radius: 4px; box-shadow: inset 0 0 0 .5px var(--rd-line); }
.bc-thumb:is(:hover, [data-hover]) { background: var(--rd-hover); }
.bc-thumb[aria-pressed="true"] { background: var(--rd-ground); color: var(--rd-ink); }
.bc-thumb:focus-visible { outline: 2px solid var(--rd-accent); outline-offset: 2px; }
/* black line on white: in the dark theme the drawings turn to their negative */
html[data-theme="dark"] .bc img { filter: invert(1); }
html[data-theme="dark"] .bc-thumb img { background: #fff; }
@media (max-width: 700px) { .bc { padding: 12px; } .bc-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } .bc-thumb span { display: none; } }