.container {
  max-width: var(--max-width);
  height: 100vh;
  display: flex;
  width: 100%;
}

.listingContainer {
  display: none;
}

.skeletonContainer {
  display: none;
  overflow: hidden;
  flex-direction: row;
  flex-wrap: wrap;
  margin-top: 20px;
  gap: var(--Space-x2);
  padding-top: var(--Space-x6);
  height: 100%;
}

.skeletonItem {
  width: 440px;
}

.mapContainer {
  flex: 1;
}

@media (min-width: 900px) {
  .container {
    height: 100%;
  }
  .listingContainer {
    background-color: var(--Base-Surface-Secondary-light-Normal);
    padding: var(--Space-x3) var(--Space-x4);
    overflow-y: auto;
    max-width: 505px;
    position: relative;
    height: 100%;
    display: block;
  }
  .skeletonContainer {
    display: flex;
    width: 360px;
  }
}