.title {
  text-align: center;
  margin-bottom: 1em;
}

.grid-links {
  display: grid;
  grid-template-columns: 1fr;

  gap: 1em 2em;
  padding: 1em;
  margin: 0 auto;

  width: min-content;
  background-color: var(--blue-light);
}

@media (min-width: 420px) {
  .grid-links {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 620px) {
  .grid-links {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.grid-links a {
  background-color: var(--blue-med);
  color: white;
  text-align: center;
  width: 150px;

  padding: 8px 16px;
  border-radius: 5px;
}

.grid-links a:hover {
  filter: brightness(0.95);
}

.grid-links a:active {
  transform: scale(0.95);
}