@media (max-width: 359px) {
  :root {
    --page-gutter: 12px;
  }

  .day-hero {
    min-height: 276px;
  }

  .day-hero__title {
    width: 68%;
    font-size: 2.15rem;
  }

  .day-hero__art {
    width: 62%;
  }

  .day-metric-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .quick-grid {
    grid-template-columns: 1fr;
  }

  .bnav,
  .bottom-dock {
    right: 8px;
    left: 8px;
    padding-inline: 4px;
  }

  .more-grid {
    grid-template-columns: 1fr;
  }

  .addrow {
    grid-template-columns: 1fr;
  }

  .addrow .btn {
    width: 100%;
    min-height: 48px;
  }

  #gate .box:not(.attesa) {
    padding: var(--space-5) var(--space-4);
  }
}

@media (min-width: 431px) {
  :root {
    --page-gutter: 18px;
  }

  .day-hero {
    min-height: 310px;
  }

  .day-cover {
    min-height: 370px;
  }
}

@media (min-width: 720px) {
  html {
    background:
      linear-gradient(var(--color-border-subtle) 1px, transparent 1px),
      linear-gradient(90deg, var(--color-border-subtle) 1px, transparent 1px),
      var(--color-canvas-soft);
    background-size: 28px 28px;
  }

  body {
    padding-block: var(--space-6);
    background: transparent;
  }

  #app {
    min-height: calc(100dvh - (var(--space-6) * 2));
    border: var(--stroke-thin) solid var(--color-border-subtle);
    border-radius: var(--radius-2xl);
    box-shadow: 0 22px 60px rgba(5, 4, 4, 0.13);
  }

  .hero {
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  }

  .poilist {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .poi {
    border: var(--stroke-thin) solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface-primary);
  }

  .wxgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (orientation: landscape) and (max-height: 500px) {
  .hero {
    padding-top: var(--space-2);
  }

  .trip-selector {
    display: none;
  }

  .day-hero {
    min-height: 250px;
  }

  .day-cover {
    min-height: 290px;
  }

  .music-hero {
    min-height: 220px;
  }

  .sheet .panel {
    max-height: 96dvh;
  }
}