/* Popup buggle is the popup itself (the last container before your own content), in our case also has the .property_card class */
.popup-bubble {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -100%);

  background-color: white;
  border-radius: 5px;
  font-family: sans-serif;
  box-shadow: 0 5px 7px -4px rgba(0, 0, 0, 0.4);
}
.popup-bubble.property_card {
  height: unset;
}

/* The parent of the bubble. A zero-height div at the top of the tip. */
.popup-bubble-anchor {
  position: absolute;
  width: 100%;
  bottom: 30px;
  left: 0;
}

/* This element draws the tip. */
.popup-bubble-anchor::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  transform: translate(-50%, 0);
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 12px solid white;
}

.popup-container {
  cursor: auto;
  height: 0;
  position: absolute;
  /* The max width of the info window. */
  width: 325px;
}

/* popup bubble is the popup itself */
.property_card.popup-bubble {
  border: none;
}
.property_card.popup-bubble .listing_type {
  padding: 9px 20px;
}
.property_card.popup-bubble p.property_type {
  padding-top: 4px;
}
.property_card.popup-bubble * {
  color: black;
}
.property_card.popup-bubble h2.normal {
  font-size: 1rem;
  font-weight: 900;
  font-family: sans-serif;
  color: black;
  text-transform: none;
  padding-top: 15px;
}

@media screen and (max-width: 888px) {
  .popup-container {
    width: 200px;
  }
  .property_card.popup-bubble {
    max-height: 225px;
  }
  .property_card .card_content {
    padding: 10px;
  }
  .property_card.popup-bubble h1.normal {
    font-size: 14px !important;
  }

  .property_card.popup-bubble h2.normal {
    font-size: 12px !important;
  }

  .property_card.popup-bubble p {
    font-size: 10px !important;
  }
}