/* Tablet-specific portfolio sizing. Phones and desktop retain their existing layouts. */
@media (min-width: 651px) and (max-width: 1024px) {
  .hero {
    min-height: 78svh;
  }

  .hero-copy {
    padding-bottom: 8vh;
  }

  .grid.reels {
    gap: 18px;
    margin: 0;
    padding: 0 0 18px;
  }

  .grid.reels article,
  .reels article:nth-child(4n+2),
  .reels article:nth-child(4n+4) {
    scroll-snap-align: start;
    /* Two complete reels with a clear preview of the third in portrait. */
    flex-basis: calc(44.444% - 8px);
  }
}

@media (min-width: 651px) and (max-width: 1024px) and (orientation: landscape) {
  .hero {
    min-height: 86svh;
  }

  .grid.reels article,
  .reels article:nth-child(4n+2),
  .reels article:nth-child(4n+4) {
    flex-basis: calc((100% - 36px) / 3);
  }
}