@layer components {
  #sites-map {
    border-radius: 0.25rem;
    box-shadow: var(--shadow);
    height: 400px;
    margin-bottom: calc(var(--block-space) * 2);
    width: 100%;

    .leaflet-tile-pane img {
      max-width: none !important;
    }

    @media (prefers-color-scheme: dark) {
      .leaflet-tile-pane {
        filter: brightness(0.65) invert(1) contrast(2) hue-rotate(200deg) saturate(0.3);
      }
    }
  }

  @media (max-width: 140ch) {
    #sites-map {
      height: 300px;
    }
  }

  @media (max-width: 55ch) {
    #sites-map {
      height: 250px;
    }
  }
}