.block-map {
  .map-container {
    width: 100%;
  }

  .google-map {
    height: 600px;
    width: 100%;

    &.map-placeholder {
      background-color: lightskyblue;
    }
    /* Fix missing pegman */
    .gm-svpc div img {
      max-height: none;
      max-width: none;
    }

    .marker-info-window {
      .location {
        text-align: center;
        padding-bottom: 0.25rem;
      }
      ul {
        margin-bottom: 0px;
      }
      &.with-job-search-link {
        text-align: center;
      }
    }

    /* https://github.com/googlemaps/js-markerclustererplus/blob/main/examples/advanced_example.html */
    /* Main circle */
    .cluster-icon {
      color: #fff;
      border-radius: 100%;
      font-weight: bold;
      font-size: 15px;
      display: flex;
      align-items: center;
      @media all and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
        /* IE10+ specific styles go here */
        div {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
        }
      }

      /* opaque circles */
      &::before, &::after {
        content: "";
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;

        transform: translate(-50%, -50%);
        top: 50%;
        left: 50%;
        opacity: 0.2;
        border-radius: 100%;
        box-sizing: content-box;
      }

      /* opaque circle sizes */
      &::before {
        padding: 7px
      }

      &::after {
        padding: 14px;
      }
    }

    /* circle colours */
    .cluster-icon-1,
    .cluster-icon-1::before,
    .cluster-icon-1::after {
      background: #00a2d3;
    }

    .cluster-icon-2,
    .cluster-icon-2::before,
    .cluster-icon-2::after {
      background: #ff9b00;
    }

    .cluster-icon-3,
    .cluster-icon-3::before,
    .cluster-icon-3::after {
      background: #ff6969;
    }
  }
}