/* The ticket shop, centred at a width it reads well at and set off from the
   header above. Phones keep a narrow margin on the sides: the shop's ticket
   cards need about 330px and are cut off below that */
.tickets {
  max-width: 960px;
  margin: 0 auto;
  padding: calc(var(--fs-base) * 2) calc(var(--fs-base) / 2) 0;
}

@media (min-width: 600px) {
  .tickets {
    padding-inline: calc(var(--fs-base) * 2);
  }
}

/* Hidden from view but read out: the page's only h1 */
.tickets__title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}