.container {
  margin: .5em;
  font-family: Arial, Helvetica, sans-serif;
}

h1 {
  text-align: center;
  margin-bottom: initial;
}

.mat-mdc-card-content {
  display: flex;
  flex-direction: column;
}

.mat-mdc-card-title {
  margin: auto;
  height: 2em;
  flex: 0 0 0;
}

.mat-mdc-card-title > button {
  float: left;
}

.row {
  display: flex;
  flex-wrap: wrap;
}

.row1 th {
  width: 7.5em;
}

.row > * {
  margin: 5px;
  flex-grow: 1;
}

.row table {
  flex: 1 1 0;
  border-spacing: 0;
  width: 100%;
  border-right: 1px solid grey;
  border-top: 1px solid grey;
}

.row th, .row .title {
  background: rgb(75 200 100 / 100%);
  text-align: left;
  color: #fff;
  font-weight: 100;
  padding: 2px 5px;
}

th {
  width: 0;
}

th, td {
  border-bottom: 1px solid grey;
}

.row img {
  border-right: 0;
  flex-grow: 0;
}

.row .title {
  font-weight: bold;
  text-align: center;
}

.img {
  height: fit-content;
}

.trails-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin: 0.5em;
}