html > body > #grid {
  & map-view,
  & map-find,
  & map-add {
    /** Required arguments with purportedly ridiculous defaults */
    --element-color-marker-inside: transparent;
    --element-color-marker-border: transparent;
    --element-color-text-popup: transparent;
    --element-color-text-dark: transparent;
    --element-font: normal 40px "Comic Sans MS";

    /** Optional arguments with sensible defaults */
    --element-popup-background: white;
    --element-popup-gap: 0;
    --element-border-radius: none;
    --element-box-shadow: none;
    --element-border: none;

    display: block;
    box-shadow: var(--element-box-shadow);
    border-radius: var(--element-border-radius);
    border: var(--element-border);
    overflow: hidden;

    font: var(--element-font);
    * {
      font: unset;
    }

    color: var(--element-color-text-dark);

    & .leaflet-control-container {
      & a, & a:hover {
        color: #000000;
        outline: none;
      }
      
      & .leaflet-control-attribution {
        &, & a, & a:hover {
          color: var(--element-color-text-dark);
        }
      }
    }

    & .leaflet-control-zoom {
      font-size: 22px;
      line-height: 30px;
    }

    & .marker-cluster > div {
      line-height: 30px;
    }

    & .leaflet-popup-content-wrapper {
      border-radius: var(--element-border-radius);
      margin: 0;
      padding: 0;
      color: inherit;

      > .leaflet-popup-content {
        margin: 0;
        padding: 0;
        color: var(--element-color-text-popup);

        > ul {
          outline: none;
          padding: 10px 25px 10px 15px;
          overflow: auto;
          display: flex;
          flex-direction: column;
          gap: var(--element-popup-gap);
        }
      }
    }

    & .leaflet-popup-content-wrapper,
    & .leaflet-popup-tip {
      font: inherit;
      background: var(--element-popup-background);
    }

    & .map-marker {
      background: var(--element-color-marker-inside);
      border-radius: 50%;
      border: var(--element-color-marker-border) 2px solid;
    }

    &:is(map-view) {
      height: 100%;
    }

    &:is(map-add) {
      display: block;
      aspect-ratio: 4 / 3;
      width: 100%;
    }
  }

  > main,
  > main.landing > section {
    > map-view {
      display: block;
      height: 17rem;
      width: 100%;
    }
  }
}