


.track {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-5);
  align-items: start;
  padding: var(--sp-5) var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease);
}
.track:hover {
  border-color: var(--brand);
  background: var(--surface-2);
}
.track__num {
  font-family: var(--font-num);
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: 1;
  color: color-mix(in srgb, var(--brand) 45%, transparent);
}
.track h3 {
  font-size: var(--fs-lg);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-block-end: var(--sp-2);
}
.track h3 i {
  color: var(--brand);
  font-size: .95em;
}
.track p {
  color: var(--text-2);
  font-size: var(--fs-sm);
}
@media (max-width: 560px) {
.track {
    grid-template-columns: 1fr;
    gap: var(--sp-2);
    padding: var(--sp-4);
  }
}

 
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: center;
}
