.hero-capabilities{
  width:calc(100% - var(--page-margin-total) * 2);
  max-width:calc(132rem + var(--page-margin-total) * 2);
  margin:24px auto 0;
  overflow-x:auto;
  border:1px solid #e6e6e0;
  border-radius:22px;
  background:#fff;
  scrollbar-width:none;
  overscroll-behavior-inline:contain;
}
.hero-capabilities::-webkit-scrollbar{display:none}
.hero-capabilities-track{
  display:grid;
  grid-template-columns:repeat(5,minmax(190px,1fr));
  min-width:100%;
}
.hero-capabilities a{
  min-height:92px;
  display:flex;
  align-items:center;
  gap:17px;
  padding:18px 26px;
  color:#1d201a;
  font-size:17px;
  font-weight:500;
  letter-spacing:-.022em;
  border-right:1px solid #ecece6;
  transition:background-color .22s,color .22s;
}
.hero-capabilities a:nth-child(5n){border-right:0}
.hero-capabilities a:nth-child(n+6){border-top:1px solid #ecece6}
.hero-capabilities a:hover{background:#f7f6f1;color:#000}
.hero-capabilities a:focus-visible{position:relative;z-index:1;outline:2px solid #111;outline-offset:-3px}
.hero-capabilities svg{
  width:23px;
  height:23px;
  flex:0 0 auto;
  fill:none;
  stroke:#7b7f76;
  stroke-width:1.65;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:stroke .22s,transform .22s;
}
.hero-capabilities a:hover svg{stroke:#111;transform:translateY(-1px)}

@media(max-width:1120px){
  .hero-capabilities-track{min-width:1050px}
  .hero-capabilities a{min-height:84px;padding:16px 22px;font-size:15px}
}
@media(max-width:680px){
  .hero-capabilities{margin-top:16px;border-radius:18px;scroll-snap-type:x mandatory;scroll-padding-inline:0}
  .hero-capabilities-track{min-width:900px;grid-template-columns:repeat(5,180px)}
  .hero-capabilities a{min-height:72px;padding:14px 17px;gap:13px;font-size:14px;scroll-snap-align:start}
  .hero-capabilities svg{width:20px;height:20px}
}