/* Larger, more readable Home cards on touch screens. */
.card[data-action="Hub Sociale"] .scene {
  background-image: linear-gradient(180deg, rgba(2, 16, 34, .08), rgba(2, 15, 30, .35)), url("hub-social.jpg");
  background-position: center 48%;
  background-size: cover;
  background-repeat: no-repeat;
}

@media (min-width: 761px) and (max-width: 1100px) {
  .center { width: min(100%, 1000px); }
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .card { height: clamp(190px, 23vw, 245px); min-height: 190px; }
  .cardbody { min-height: 49%; gap: 9px; padding: 8px 10px 10px; }
  .round { width: 52px; height: 52px; font-size: 29px; }
  .copy b { font-size: clamp(20px, 2vw, 24px); }
  .copy small { font-size: clamp(15px, 1.5vw, 18px); }
}

@media (max-width: 760px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .card { height: clamp(184px, 55vw, 220px); min-height: 184px; border-radius: 16px; }
  .cardbody { min-height: 51%; gap: 7px; padding: 7px 7px 9px; }
  .round { width: 45px; height: 45px; font-size: 25px; }
  .copy b { font-size: clamp(17px, 4.5vw, 20px); }
  .copy small { font-size: clamp(13px, 3.5vw, 15px); line-height: 1.15; }
}

@media (max-width: 360px) {
  .grid { gap: 8px; }
  .card { height: 184px; }
  .cardbody { gap: 5px; padding-inline: 5px; }
  .round { width: 39px; height: 39px; font-size: 22px; }
  .copy b { font-size: 16px; }
  .copy small { font-size: 12px; }
}