.keyboards-page .options.with-shots .option { min-height: 128px; }
.keyboards-page .options.with-shots .option-shot {
  width: 84%; max-width: none; height: auto; aspect-ratio: 100 / 36;
  margin: 0 auto 6px; object-fit: cover; object-position: center;
}
@media (max-width: 700px) {
  .keyboards-page .options.with-shots .option { min-height: 104px; }
}

@media (min-width: 701px) {
  .keyboards-page .questionnaire:has(.options.with-shots) { width: min(1080px, calc(100vw - 64px)); }
  .keyboards-page .option small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
}
@media (min-width: 701px) and (max-width: 1129px) {
  .keyboards-page .options.with-shots:has(> .option:nth-child(5)) { flex-wrap: wrap; }
  .keyboards-page .options.with-shots:has(> .option:nth-child(5)) > .option { flex: 1 1 calc(25% - 6px); }
}

.keyboards-page .mouse img { width: 190px; height: 120px; object-fit: cover; }
.keyboards-page .mouse .caption { margin-top: calc(var(--tall, .58) * 95px - 50px); position: relative; z-index: 1; }
.keyboards-page .mouse { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; transform-origin: 95px 111px; }