.hero-disciplines {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-top: 1px solid var(--line);
}

.hero-disciplines > div,
.hero-disciplines > a {
  display: grid;
  grid-template-columns: 3rem 1fr auto;
  align-items: baseline;
  gap: 1.25rem;
  padding: 1.8rem 0;
  border-bottom: 1px solid var(--line);
}

.hero-disciplines > a {
  text-decoration: none;
  transition: padding .2s ease, color .2s ease;
}

.hero-disciplines > a:hover {
  color: var(--gunmetal);
  padding-left: .5rem;
}

.hero-disciplines span {
  color: var(--gunmetal);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .14em;
}

.hero-disciplines strong {
  font-size: clamp(2rem, 3.6vw, 4rem);
  line-height: 1;
  letter-spacing: -.05em;
  text-transform: uppercase;
}

.hero-disciplines small {
  color: var(--gunmetal);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .hero-disciplines { margin-top: 1.5rem; }
}

@media (max-width: 600px) {
  .hero-disciplines > div,
  .hero-disciplines > a { grid-template-columns: 2rem 1fr; }
  .hero-disciplines small { grid-column: 2; }
}