/* Tablet: 2 cards per row (<= 960px) */
@media screen and (min-width: 429px) and (max-width: 960px){
  .card{
    flex: 0 1 calc((100% - var(--gap)) / 2);
  }
  .card img{ height: 190px; }
}

/* Mobile: 1 card per row (<= 428px) */
@media screen and(max-width: 428px){
  .site-header{ padding: 28px 0 12px; }
  .site-header h1{ font-size:1.6rem; }
  .cards{
    gap: 18px;
    margin: 20px 0 36px;
    justify-content: center;
    align-items: center;
  }
  .card{
    flex: 0 1 100%;
    max-width: 540px;
    margin: 0 auto;
  }
  .card img{ height: 160px; }
  .btn{ padding: 8px 14px; border-radius: 12px; }
  /* Center the card content on mobile */
  .card-body{
    align-items: center;
    text-align: center;
  }
  .card-body p{ text-align: center; }
  .card-body .btn{ align-self: center; }
}