/* ==========================================================================
   Gamer v5: escalera de resoluciones dentro de una tarjeta blanca. Cada marco mide en proporcion real de
   pixeles (ancho 1 : 1.333 : 2 para 1080p, 1440p y 4K; 16:9): el area queda 1 : 1.78 : 4, igual que los
   2.1, 3.7 y 8.3 millones de pixeles. Dato hecho con CSS, sin foto. Con movimiento, cada marco crece desde
   el tamano del escalon anterior mientras cuentan los millones (scrub).
   ========================================================================== */
.res-ladder { --res-u: clamp(64px, 28px + 3.6vw, 108px); text-align: left; }
.res { order: -2; display: flex; align-items: flex-end; height: calc(var(--res-u) * 2 * 9 / 16 + 2px); margin: 0 0 var(--sp-4); }
.res__frame {
  display: block;
  width: calc(var(--res, 1) * var(--res-u));
  aspect-ratio: 16 / 9;
  border: 1px solid var(--black);
  transform-origin: 0 100%;
}
.res-ladder .rail__value { font-size: var(--fs-35); letter-spacing: var(--tr-35); line-height: 1.1; }
@media (min-width: 900px) {
  .res-ladder,
  .res-ladder.card { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0; }
  .res-ladder > .rail__row,
  .res-ladder > .rail__row:first-child,
  .res-ladder > .rail__row:last-child { padding: 32px 26px; border-top: 0; border-left: 1px solid var(--line); align-content: start; }
  .res-ladder > .rail__row:first-child { border-left: 0; }
}