/* Present the first three desktop sections as equal-height panels. */
@media (min-width: 641px) and (min-height: 1000px) {
  .hero,
  .work,
  .coffee { height: 100svh; }

  .work {
    padding-top: 55px;
    padding-bottom: 25px;
    overflow: hidden;
  }

  .work .work-topline { margin-top: 5px; }
  .work .studio-board { height: calc(100svh - 570px); }
  .work .print { width: 24%; }
  .work .print img,
  .work .amenity-art { height: 180px; }
  .work .tablet-object { width: 22%; }
  .work .tablet-label { margin-top: 10px; font-size: 16px; }
  .work .tablet-hint { margin-top: 3px; }
  .work .experience { margin-top: 20px; padding-top: 18px; }
  .work .brand-names { padding: 16px 0; }

  .coffee {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}

/* On shorter desktop screens, retain every interactive card within a
   one-screen panel by allowing its contents to scroll inside the panel. */
@media (min-width: 641px) and (max-height: 999px) {
  .work,
  .coffee {
    height: 100svh;
    overflow-y: auto;
  }
}