#projectList {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 5vw;
  row-gap: 5vw;
}

/* TODO Style list properly when it has less elements than set columns */
.card {
  width: 35vw;
  height: 15vw;
  padding: 0vw;
  display: flex;
  justify-content: space-between;
  text-align: left;
  font-size: 1.5vw;
  cursor: default;
  overflow: hidden;
}

.card a {
  margin-bottom: 0.5vw;
}

.card .title {
  font-size: 120%;
}

.card .description {
  font-size: 70%;
}

.card .buttonContainer {
  display: flex;
}

.cardContent {
  flex-basis: 0vw;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.2vw;
}

.buttonContainer a {
  margin-right: 0.5vw;
  border: var(--default-width-unit) solid var(--default-link-color);
  border-width: calc(var(--default-width-unit) / 2);
  border-radius: calc(var(--card-border-radius) / 2);
  padding: 0.1vw;
  padding-left: 0.5vw;
  padding-right: 0.5vw;
  font-size: 80%;
}

.buttonContainer a:hover {
  border-color: var(--default-link-hover-color);
  background-color: rgba(5, 30, 37, 0.9);
}

.buttonContainer a:focus {
  box-shadow: 0vw 0vw 0.4vw 0vw var(--default-link-color);
}

.card .cover {
  width: 15vw;
  object-fit: cover;
  object-position: 50% 50%;
  filter: brightness(0.5) grayscale(100%);
  flex-basis: 15vw;
}

.card:hover .cover, .card:focus .cover, .card:focus-within .cover {
  filter: none;
}