@media (max-width: 720px) {
  .qv-box .qv-in { gap: 12px; padding-top: 12px }
  .qv-box .qv-media { width: 100%; max-width: 420px; margin-inline: auto }
  .qv-box .qv-main {
    height: auto;
    aspect-ratio: var(--qv-ratio-m, 4 / 3);
    max-height: var(--qv-max-h-m, min(34vh, 280px));
    width: 100%;
    margin-inline: auto;
    font-size: calc(40px * var(--fz-card, 1));
  }
  .qv-box .qv-main img { object-fit: var(--qv-fit-m, contain) }
  .qv-box .qv-thumbs { gap: 6px; margin-top: 8px; justify-content: center }
  .qv-box .qv-thumbs img { width: 44px; height: 44px; border-radius: 9px }
  .qv-box .qv-txt { gap: 7px }
  .qv-box .qv-txt h3 { font-size: calc(15px * var(--fz-h3, 1)); line-height: 1.55 }
  .qv-box .qv-price { font-size: calc(18px * var(--fz-price, 1)) }
}

@media (max-width: 380px) {
  .qv-box .qv-main { max-height: var(--qv-max-h-xs, min(30vh, 220px)) }
  .qv-box .qv-thumbs img { width: 40px; height: 40px }
}

@media (max-width: 720px) and (max-height: 520px) and (orientation: landscape) {
  .qv-box { max-height: 96vh }
  .qv-box .qv-in { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr) }
  .qv-box .qv-media { max-width: none }
  .qv-box .qv-main { max-height: 62vh }
  .qv-box .qv-thumbs { justify-content: flex-start }
}