body {
  padding-top: 150px;
  padding-bottom: 150px;
}

#projets-container {
  max-height: calc(100vh - 250px);
  overflow-y: auto;
}

#projets-container::-webkit-scrollbar {
  width: 0;
}

.projet {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: var(--gutter-width);
  padding: 0.5em 0;
}

.projet:hover > p {
  font-weight: 700;
}

.projet p {
  grid-column: span 5;
}

.projet p {
  text-transform: uppercase;
}

.projet p:last-child {
  text-align: right;
  grid-column: span 2;
}

@media screen and (max-width: 750px) {
  body {
    padding-top: 90px;
    padding-bottom: 90px;
  }

  #projets-container {
    max-height: calc(100vh - 150px);
  }
}