
/* "Choose a pet to care for" was a horizontal scroll rail — `display:flex` with
   `overflow-x:auto`, `nowrap`, x-mandatory snap, and each card locked to
   `flex:0 0 auto; width:196px`. At 390 that was 1052px of content in a 358px box,
   so four of the five cards were off-screen. She asked for them to wrap onto
   more than one row instead. */
#page-petparent .pp-pets{
  display:grid !important;
  grid-template-columns:repeat(auto-fill, minmax(196px, 1fr)) !important;
  overflow-x:visible !important;
  scroll-snap-type:none !important;
  gap:16px !important;
  padding:4px 0 12px !important;
}
/* the cards were sized for the rail — they have to fill their grid cell now,
   and drop the snap alignment that goes with a rail */
#page-petparent .pp-pets > .pp-pet{
  flex:initial !important;
  width:auto !important;
  scroll-snap-align:none !important;
}
/* two across on phones rather than one very wide card */
@media (max-width:520px){
  #page-petparent .pp-pets{
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    gap:12px !important;
  }
  #page-petparent .pp-pets > .pp-pet{ padding:14px !important; }
}
