#highlights {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1em;
  width: 90vw;
  margin: 2em auto;
  transition: all 0.5s ease-in-out;
  a {
    text-decoration: none;
    transition: all 0.5s ease-in-out;
    border: 0.15em solid var(--text-color);
    /* overflow: hidden; */
    height: 15em;
  }

  .highlight-item {
    background-size: cover;
    background-position: center;
    border-radius: var(--radius-out);
  }

  @media screen and (max-width: 1000px) {
    grid-template-columns: repeat(2, 1fr);
    gap: 2em;
    @media screen and (max-width: 500px) {
      grid-template-columns: repeat(1, 1fr);
    }
  }
}