/* Media example: local map/audio chrome; video uses the demo asset. */
.ex-map {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  background:
    linear-gradient(90deg, rgb(148 163 184 / 0.15) 1px, transparent 1px) 0 0 / 2rem 2rem,
    linear-gradient(#e2e8f0, #cbd5e1);
  color: #0f172a;
}

.ex-map__label {
  font-size: 1.3rem;
  letter-spacing: 0.06rem;
  text-transform: uppercase;
  opacity: 0.85;
}

.ex-map__pin {
  width: 1rem;
  height: 1rem;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--bf-blue);
  box-shadow: 0 0 0 0.35rem rgb(0 86 179 / 0.2);
}

.ex-audio {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #111827, #334155);
}

.ex-audio__bars {
  display: block;
  width: 70%;
  height: 2.5rem;
  background: repeating-linear-gradient(90deg, #38bdf8 0 4px, transparent 4px 10px);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  opacity: 0.85;
}