/* Card carousel (Home: Capabilities, Why HK: EPC) and the Capabilities overview cards. */

.car__ctl{display:flex;gap:10px;justify-content:flex-end;margin-top:-8px;margin-bottom:24px}
.car__ctl button{width:48px;height:48px;border-radius:50%;border:1.5px solid var(--rule);background:var(--paper);color:var(--ink);cursor:pointer;display:grid;place-items:center}
.car__ctl button:hover{border-color:var(--royal);background:var(--royal);color:#fff}
.car__ctl svg{width:16px;height:16px}
.track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(300px,calc((100% - 48px)/3.25));gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;scrollbar-width:thin;scrollbar-color:var(--royal) var(--rule)}
.card{scroll-snap-align:start;background:var(--paper);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;border:1px solid var(--rule)}
.card__img{aspect-ratio:16/10;position:relative;overflow:hidden}
.card__img svg{width:100%;height:100%;transition:transform .5s}
.card:hover .card__img svg{transform:scale(1.04)}
.card__body{padding:26px 26px 28px;display:flex;flex-direction:column;flex:1}
.card h3{font-size:26px;margin-bottom:12px;line-height:1.02}
.card p{font-size:15.5px;color:var(--muted);margin-bottom:24px}
.card .explore{margin-top:auto}
.cap__foot{margin-top:40px;display:flex;justify-content:center}
.track--sm .card__body{padding:20px 22px 22px}

@media (max-width:980px){
  .track{grid-auto-columns:minmax(280px,78%)}
}

@media (max-width:640px){
  .car__ctl{justify-content:flex-start}
}