/* The page for sponsors (/sponsorzy): the document look of site.css (.doc), the game's mock-ups in a row, three packages. */
.sponsors .back-row { margin: 24px 0 0; }
.sponsors .lead { font-size: 19px; color: #e6e1f0; }
.sponsors .play-wrap { margin-top: 26px; }
.sponsors .play-note { text-align: center; color: #d6d0e8; }
.sponsors h2 { margin: 40px 0 16px; }
.sponsors .card h2 { margin: 0 0 12px; }
.sponsors .small { margin: 14px 0 0; font-size: 15px; line-height: 1.45; color: #aaa4b9; }

/* The mock-ups: three phone screens in a row; on a phone a strip that scrolls sideways. */
.sp-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; }
.sp-gallery li { margin: 0; }
.sp-gallery img { display: block; width: 100%; height: auto; border: 4px solid var(--krem); box-shadow: 4px 4px 0 #000; background: var(--noc); image-rendering: pixelated; }
.sp-gallery span { display: block; margin-top: 10px; font-size: 15px; line-height: 1.4; color: #d6d0e8; }
@media (max-width: 560px) {
  .sp-gallery { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 72%; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 8px 12px 0; }
  .sp-gallery li { scroll-snap-align: start; }
}

/* The packages: side by side on a computer, one under another on a phone. */
.sp-packages { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.sp-packages .card { margin: 0; padding: 20px; display: flex; flex-direction: column; }
.sp-packages h3 { font: 400 var(--px2)/1 'Jersey10', ui-monospace, monospace; -webkit-font-smoothing: none; margin: 0 0 12px; color: var(--krem); }
.sp-packages .price { margin: 0; color: var(--zloto); }
.sp-packages .price strong { font: 400 var(--px3)/1 'Jersey10', ui-monospace, monospace; -webkit-font-smoothing: none; color: var(--zloto); display: block; }
/* Side by side, the headings take two lines whether they need them or not, so the prices line up (the owner, 09.10). */
@media (min-width: 440px) {
  .sp-packages h3 { min-height: calc(var(--px2) * 2); }
}
.sp-packages .season { margin: 4px 0 12px; font-size: 15px; color: #aaa4b9; }
.sp-packages ul { margin: 0; padding-left: 20px; font-size: 16px; line-height: 1.45; }
.sp-packages li { margin: 0 0 6px; }
.sponsors ol { margin: 0; padding-left: 22px; }
.sponsors ol li { margin: 0 0 8px; }
.sponsors .contact .play-wrap { margin-top: 18px; }