.brand--hero {
  gap: 8px;
  font-size: 38px;
  letter-spacing: -1.4px;
  text-shadow: 0 2px 18px #000;
}
.brand--hero .brand-name { display: flex; align-items: center; }
.brand--hero .brand-gym {
  padding-left: 9px;
  border-left: 2px solid var(--red);
  font-size: .62em;
  letter-spacing: 3px;
}
.brand--hero small { margin-left: 3px; font-size: 8px; }
@media (max-width: 800px) {
  .nav { height: 82px; }
  .brand--hero { font-size: 33px; gap: 6px; }
  .brand--hero .brand-gym { padding-left: 7px; letter-spacing: 2px; }
  .brand--hero small { display: none; }
}