/* dm-desk.css (2026-11-04, owner: "the whole entire desktop has huge cards and is not up to date. Can we do a fix pass")
   The desktop is the app in its iPad layout (dm-pad.css). Cards drawn for a phone column were stretching to the full
   1240-1360 px column, so one card took a whole screen: the partner placement (16:10 at 1160 wide = 725 px tall), a
   lone "On right now" card, the Swipe deals stack, the Games tiles (two across at 570 x 430, the featured ones
   1160 x 566). Here they get desktop sizes: grids instead of single stretched cards, banners instead of posters.
   Desktop only (min-width 1200 + html.dm-pad); iPad and phones are untouched. */
@media (min-width: 1200px) {
  /* partner placement: a banner on a desk */
  html.dm-pad .sponsor.bp { aspect-ratio: auto !important; height: 340px !important; min-height: 0 !important }
  html.dm-pad .sponsor.bp .bp-img, html.dm-pad .sponsor.bp .bp-shade { height: 100% !important }

  /* Deals / Feed / Events card rows: cards keep a card's width instead of one stretching across */
  html.dm-pad .px-car { justify-content: flex-start }
  html.dm-pad .px-car > .px-card { flex: 0 0 380px !important; width: 380px !important; height: 300px !important }
  html.dm-pad .fx-wide .px-card, html.dm-pad .px-card.px-ev { height: 300px !important }

  /* Swipe deals: a card-sized stack in the middle, not a 1240 px billboard */
  html.dm-pad .px-deck { width: 520px !important; max-width: 520px !important; height: 420px !important; margin-left: auto !important; margin-right: auto !important }

  /* Games: four across, the featured ones two wide */
  html.dm-pad .gt .gt-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 14px !important }
  html.dm-pad .gt .gt-grid > .gt-t { grid-column: auto !important; aspect-ratio: 4 / 3 !important }
  html.dm-pad .gt .gt-grid > .gt-t:first-child, html.dm-pad .gt .gt-grid > .gt-t:last-child { grid-column: span 2 !important; aspect-ratio: auto !important }
  html.dm-pad .gt .gt-grid > .gt-t .gt-play { height: 40px !important; padding: 0 16px 0 13px !important; font-size: 14px !important }
  html.dm-pad .gt .gt-grid > .gt-t b { font-size: 14px !important }
  html.dm-pad .gt .gt-grid > .gt-t:hover { transform: translateY(-3px); transition: transform .18s cubic-bezier(.16, 1, .3, 1) }

  /* Deals grid: never fewer than four across on a desk */
  html.dm-pad .dk-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important }
}
@media (min-width: 1600px) {
  html.dm-pad .gt .gt-grid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important }
}