.contact .nav {
  grid-column: 1 / 13;
  width: 100%;
}

.contact .cards {
  grid-column: 1 / 13;
}

.contact .cards {
  gap: 32px;
  padding: 0;
}

.contact .nav h2 {
  margin: 0;
}

.contact .cards .card {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  border: 1px solid var(--gray-25);
  padding: 16px;
  margin: 0;
}

.contact .cards .card > * {
  margin: 0;
  padding: 4px 0;
}

.contact .cards .card .title,
.contact .cards .card .uni {
  color: var(--disabled);
}

.contact .cards .card img {
  width: 100px;
  height: 108px; /* including padding */
  border-radius: 100%;
  margin-bottom: 10px;
}

.contact .cards .card .email,
.contact .cards .card .phone {
  font-weight: 600;
}

.contact .cards .card .email::before,
.contact .cards .card .phone::before {
  content: url(../images/icon-user_black.svg);
  padding: 4px 12px 4px 4px;
}

.contact .cards .card .btn-wrapper {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  height: 100%;
}
.contact .cards .card .button::after {
  content: url(../images/icon-button-linkout.svg);
  position: relative;
  right: -20px;
}

/* S */
@media (max-width: 479px) {
  /* 4 columns */

  .contact .cards .card {
    width: 100%;
    margin-bottom: 16px;
  }
}

/* M */
@media (min-width: 480px) and (max-width: 600px) {
  /* 8 columns */
}

@media (min-width: 600px) and (max-width: 960px) {
  /* 8 columns */
  .contact .cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

/* L & XL */
@media (min-width: 960px) {
  /* 12 columns */
  .contact .cards {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}