/* Identidade textual fictícia usada nesta demonstração. */
.brand {
  width: 230px;
  height: 72px;
}

.brand-wordmark {
  display: flex;
  flex-direction: column;
  color: var(--deep);
  line-height: 1.05;
}

.brand-wordmark strong {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 21px;
  letter-spacing: -.04em;
}

.brand-wordmark small {
  margin-top: 7px;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.brand-wordmark-footer {
  color: #d6e5e1;
}

.brand-wordmark-footer strong {
  font-size: 24px;
}

.map-placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-content: center;
  gap: 4px;
  text-align: center;
  color: var(--deep);
  background: linear-gradient(135deg, #dce8e4, #eef4f1);
}

.map-placeholder span {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 600;
}

.map-placeholder small {
  color: var(--muted);
}

@media (max-width: 1000px) {
  .brand { width: 185px; }
}

@media (max-width: 780px) {
  .brand {
    width: 182px;
    height: 58px;
  }
}