.hero-copy {
  align-self: flex-start;
  margin: 0 auto;
  padding: calc(var(--nav) + 1rem) 0 4rem;
}

.institution-logos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
  gap: 1.25rem;
  width: min(620px, 100%);
  margin: 1.25rem auto 0;
}

.institution-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  color: var(--muted);
  text-decoration: none;
}

.institution-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 64px;
}

.institution-mark img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  image-rendering: pixelated;
}

.institution-logo-imperial .institution-mark img {
  width: 140px;
  height: 64px;
}

.institution-name {
  font: 12px/1.3 var(--pixel);
  letter-spacing: .015em;
  transition: color .2s;
}

.institution-logo:hover .institution-name {
  color: var(--ivory);
}

.hero-actions {
  margin-top: 1.5rem;
}

@media (max-width: 560px) {
  .hero-copy {
    padding-top: calc(var(--nav) + 1.2rem);
    padding-bottom: 4.5rem;
  }

  .institution-logos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(310px, 100%);
    gap: 1.15rem 1.5rem;
    margin-top: 1.4rem;
  }

  .institution-mark {
    height: 52px;
  }

  .institution-mark img {
    width: 52px;
    height: 52px;
  }

  .institution-logo-imperial .institution-mark img {
    width: 122px;
    height: 52px;
  }

  .institution-name {
    font-size: 11px;
  }
}