/* =========================================================
   grid.css — card sizing within the .layout flat grid
   Cards are direct children of .layout (via display:contents
   on .layout__main). This file handles card min/max sizing.
   ========================================================= */

/* ---------------------------------------------------------
   .card as a direct grid child
   Ensures white background fills the entire grid cell.
   --------------------------------------------------------- */
.layout > .card {
  background-color: var(--color-surface);
  min-width: 0;
}

/* ---------------------------------------------------------
   Responsive — mobile (≤ 640px)
   Cards revert to natural stacking
   --------------------------------------------------------- */
@media (max-width: 640px) {
  .layout > .card {
    width: 100%;
  }
}