/* the map grid, on top of css/site.css */
h2 { margin: 1.5em 0 8px; padding-bottom: 3px; border-bottom: 1px solid #888; font-size: 2em; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 8px; }
.zona { margin: 0; }
.map { height: 1000px; background: #ddd; }
.zona figcaption { padding-top: 4px; font: 13px/1.35 monospace; }

/* leaflet's controls and popups, in the site's plain look */
.leaflet-container { font: 13px/1.35 monospace; }
.leaflet-container a { color: #00e; }
.leaflet-container .leaflet-control-attribution { font-size: 10px; }
/* a half pixel of overlap hides seams between tiles at fractional page positions */
.leaflet-container img.leaflet-tile { width: 256.5px !important; height: 256.5px !important; mix-blend-mode: normal; }
.leaflet-bar, .leaflet-bar a, .leaflet-popup-content-wrapper { border-radius: 0 !important; }
.leaflet-touch .leaflet-bar { border: 1px solid #888; }
.leaflet-container .leaflet-bar a { color: #000; }
.leaflet-popup-content { margin: 8px; font: inherit; }
.leaflet-popup-tip { box-shadow: none; }
.obs b, .obs i, .obs small, .obs img { display: block; }
.obs b { font-weight: normal; }
.obs img { width: 100%; max-height: 180px; margin-bottom: 6px; object-fit: cover; }
.obs small { margin-top: 4px; font-size: inherit; }

.touch { display: none; }
@media (pointer: coarse) { .touch { display: block; } .mouse { display: none; } }
@media (max-width: 720px) {
  .grid { grid-template-columns: minmax(0, 1fr); }
}