/*
  tabletop.me, tablets (768 to 1099 px). Loaded with media="(min-width: 768px) and (max-width: 1099px)".
  Tablets get the desktop site; this only makes it fit: the desktop navigation, a balanced hero,
  and two-up card grids where three would be cramped.
*/
.header {
  height: 76px;
}
.header-inner {
  gap: 8px;
}
.header .brand .brand-logo {
  height: 40px;
}
.header nav {
  position: static;
  display: flex;
  height: auto;
  margin: 0 4px 0 auto;
  padding: 0;
  overflow: visible;
  flex-direction: row;
  gap: 2px;
  border: 0;
  background: none;
  backdrop-filter: none;
}
.header nav a {
  padding: 8px 7px;
  font-size: 12px;
  white-space: nowrap;
}
.menu-button {
  display: none;
}
.header .button-small {
  margin-left: 0;
}

/* Hero: text and video side by side, with room for both */
.hero .hero-grid,
.wrap.hero-grid {
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: 36px;
  min-height: 0;
  padding-block: 56px 48px;
}
.hero h1 {
  font-size: clamp(54px, 7.2vw, 72px);
}
.hero-meta {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 14px 26px;
}
.hero .hero-video-wrap {
  width: 100%;
  max-width: none;
  margin: 0;
  justify-self: stretch;
}

/* Cards: two across where three would be cramped */
.highlight-grid,
#featured-exhibitors {
  grid-template-columns: repeat(2, 1fr);
}
.highlight-grid > :nth-child(3),
#featured-exhibitors > :nth-child(3) {
  grid-column: 1 / -1;
}
.exhibitor-grid {
  grid-template-columns: repeat(2, 1fr);
}

/* No sideways scroll from decorative shapes, and the orbiting icons stay off the copy at this width */
html,
body {
  overflow-x: clip;
}
.hero-orbit {
  display: none;
}