.district {
  width: 100%;
  height: 100%;
  border: solid 1px var(--color-greyLighter);
  background-color: var(--color-white);
}

.district:hover {
  color: var(--color-greyDark);
}

.imageContainer,
.content {
  vertical-align: top;
}

.imageContainer {
  width: 100%;
}

.image {
  width: 100%;
  height: 100%;
}

.content {
  margin: 1rem;
  padding: 0;
}

.title {
  font-family: var(--font-avenir);
  font-size: var(--fontsize-large-i);
  font-weight: var(--fontweight-demi);
  line-height: 1.74583125rem;
  color: var(--color-black);
  margin: 0 0 0.25rem 0;
  padding: 0;
  text-decoration: none;
}

.subtitle {
  font-family: var(--font-avenir);
  font-size: var(--font-small-i);
  line-height: 1.43020625rem;
  color: var(--color-grey);
  margin: 0;
  padding: 0;
}

.district {
  width: 100%;
  height: 100%;
  border: solid 1px var(--color-greyLighter);
  background-color: var(--color-white);
}

.district:hover {
  color: var(--color-greyDark);
}

.imageContainer,
.content {
  vertical-align: top;
}

.imageContainer {
  width: 100%;
}

.image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.content {
  margin: 1rem;
  padding: 0;
}

.title {
  font-family: var(--font-avenir);
  font-size: var(--fontsize-large-i);
  font-weight: var(--fontweight-demi);
  line-height: 1.74583125rem;
  color: var(--color-black);
  margin: 0 0 0.25rem 0;
  padding: 0;
  text-decoration: none;
}

.subtitle {
  font-family: var(--font-avenir);
  font-size: var(--fontsize-small-i);
  line-height: 1.43020625rem;
  color: var(--color-grey);
  margin: 0;
  padding: 0;
}

Update District card to have object-fit and use smaller font for supporting copy
Update District card to have object-fit and use smaller font for supporting copy
