.map-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* Соотношение сторон 16:9 */
  height: 0;
  overflow: hidden;
}

.map-responsive iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.gradient-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3%; /* Покрывает верхние 10% карты */
  background: linear-gradient(to bottom, rgba(210, 219, 218, 1), rgba(210, 219, 218, 0));
  pointer-events: none; /* Позволяет взаимодействовать с картой под оверлеем */
}