.list {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  width: 97%;
}
.list-row {
  display: flex;
  flex-direction: row;
  padding: 10px;
  border: 1px solid #f4f4f4;
  transition: all ease 0.3s;
}
.list-row:hover {
  border: 2px solid darkgray;
  background-color: var(--primary-color);
  cursor: pointer;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.35);
  margin-top: 5px;
  margin-bottom: 10px;
  color: var(--font-color);
}
.list-item {
  margin-right: 5px;
  flex: 1;
}
.flex-1 {
  flex: 1 1 0;
}
.flex-2 {
  flex: 2 2 0;
}
.flex-3 {
  flex: 3 3 0;
}