/* Align the desktop column break of the top info pills with the lower
   Value Highlights / Additional Information two-panel layout. */
@media (min-width: 901px){
  .card .pillgrid{
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr) !important;
    gap: 12px !important;
  }

  .card .pill{
    min-width: 0 !important;
  }
}

/* When the lower panels collapse to one column, make the top pill area
   collapse at the same breakpoint so the visual rhythm stays aligned. */
@media (min-width: 781px) and (max-width: 900px){
  .card .pillgrid{
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
}