.employees {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.5rem;
}

.employee {
  width: 100%;
  height: 100%;
  display: grid;
  align-items: center;
  grid-template-columns: max-content 1fr;
  grid-template-rows: max-content max-content max-content 1fr max-content max-content;
  grid-template-areas:
    "image image"
    "name name"
    "position position"
    "text text"
    "icons phone-number"
    "icons email-number";
}

.employee-image {
  grid-area: image;
  width: 100%;
  object-fit: contain;
}

.employee-name {
  grid-area: name;
  margin: 0;
}

.employee-text {
  grid-area: text;
  margin-bottom: 1rem;
}

.employee-position {
  grid-area: position;
}

.employee-email {
  margin: 0;
  font-size: 0.9em;
  grid-area: email-number;
}

.employee-icons {
  grid-area: icons;
  margin-right: 1rem;
}

.employee-phone {
  margin: 0;
  font-size: 0.9em;
  grid-area: phone-number;
}
