/* Keep the supplied reference composition proportional to the card width. */
.network-art--phone {
  isolation: isolate;
  container-type: inline-size;
  container-name: network-card;
}
.network-hero {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 1.4;
  max-width: 510px;
  margin: 8px auto 0;
}
.network-wordmark {
  position: absolute;
  top: 21%;
  left: 4%;
  width: 44%;
  z-index: 1;
}
.network-hero .big-5g {
  width: 100%;
  padding: 0;
  font-family: 'Gotham Black', 'Gotham', 'Arial Black', Impact, sans-serif;
  font-size: 144px;
  font-size: 30cqw;
  font-weight: 900;
  font-synthesis: none;
  line-height: .82;
  letter-spacing: -.045em;
  text-align: right;
}
.phone-stage {
  position: absolute;
  top: -5%;
  right: 0;
  width: 64%;
  height: 110%;
  z-index: 2;
  pointer-events: none;
}
.hero-phone {
  width: 100%;
  height: 100%;
}
.hero-phone img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
}
.network-art--phone .network-label {
  margin: min(7px, 1.5cqw) 0 0;
  width: 100%;
  color: var(--navy);
  font-size: 12px;
  font-size: min(.75rem, 2.35cqw);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.5;
  text-align: right;
  white-space: nowrap;
}
.network-art--phone .state-mosaic {
  margin-top: 8px;
  margin-bottom: 28px;
}
.location--pending,
.location--pending:hover {
  color: var(--muted);
  border-color: var(--line);
  border-bottom-style: dashed;
  cursor: default;
}
.location--pending b {
  color: #697586;
  background: #eef1f4;
}
.location-details {
  min-width: 0;
  line-height: 1.5;
}
.location-details small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 400;
}
@media (max-width: 480px) {
  .network-art--phone .state-mosaic { margin-bottom: 23px; }
}