body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: "Segoe UI", sans-serif;
  background-color: #fff;
  color: #ffffff;
}

header {
  background-color: #8c1d40;
  color: #fff;
  text-align: center;
  padding: 0.5rem;
  font-size: 1rem;
}

#map {
  height: calc(100% - 80px);
  width: 100%;
}

.gm-style-iw {
  font-size: 14px;
  color: #000000;
}

.location-card {
  width: min(280px, 70vw);
}

.location-card__media {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  margin-bottom: 12px;
  overflow: hidden;
  background: #ffc627;
}

.location-card__thumbnail {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.location-card__thumbnail-placeholder {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  color: #8c1d40;
  font-weight: 700;
}

.location-card__title {
  margin: 0 0 4px;
  color: #8c1d40;
  font-size: 18px;
}

.location-card__submitter {
  margin: 0 0 10px;
  font-weight: 600;
}

.location-card__description {
  margin: 0 0 10px;
  line-height: 1.4;
}

.location-card__link {
  color: #8c1d40;
  font-weight: 600;
}