.spot-list {
  margin-bottom: var(--margin-bottom-list);
}

.spot-list--grid {
  --grid-space: 2rem;
  --item-min-width: 200px;

  display: grid;
  gap: var(--grid-space);
  /* column-gap: var(--grid-space);
  row-gap: var(--grid-space);
  grid-template-columns: repeat(2, calc((100% - var(--grid-space)) / 2));
 */

  /* Set card min width to 500px and max to 1fr by default (mobile = 1 column) */
  --item-min-width: 250px;
  grid-template-columns: 1fr;

  /* Tablet: 2 columns of min 500px, fluid width */
  @media (min-width: 640px) {
    grid-template-columns: repeat(2, minmax(var(--item-min-width), 1fr));
  }

  /* Desktop: as many 500px cards as fit fluidly */
  @media (min-width: 1024px) {
    grid-template-columns: repeat(auto-fit, minmax(var(--item-min-width), 1fr));
  }
}

.spot-list--style-1 {
  & .spot {
    /* border: 1px solid #dddddd; */
    border-radius: 1rem;
    padding: 1rem;
    background-color: white;
    box-shadow: 0 0 0 1px #dddddd;
  }

  & .spot__name {
    font-weight: 700;
  }
}

.overflow-visible {
  overflow: visible;
  scrollbar-color: auto;
  scrollbar-width: auto;
}

.spot-list--featured {
  --spacing: .25rem;
  transform: translate3d(0px, 0px, 0px);
  width: 100%;
  gap: calc(var(--spacing) * 4);
  display: flex;
  & .spot {
    flex-basis: 36%;
    flex-grow: 0;
    flex-shrink: 0;
  }
}

.spot-list--scroll-x {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  /* gap: 1rem; */
  gap: 1rem;
  padding-bottom: 1rem;
  /* padding-inline: var(--spacing-md); */
  scroll-snap-type: x mandatory;
  scroll-padding-inline-start: var(--spacing-md);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;

  & .spot {
    /* flex: 0 0 260px; */
    flex: 0 0 calc(100% - 20px + 1rem);
    scroll-snap-align: start;
  }
}

@media (min-width: 640px) {
  .spot-list--scroll-x {
    padding-inline: 0;
    scroll-padding-inline-start: 0;
    & .spot {
      flex: 0 0 260px;
    }
  }
}

.spot-list--loading {
  & .spot {
    aspect-ratio: 1 / 1;
    height: auto;
    width: 100%;
    background: #ddd;
    border-radius: 1rem;
  }
}

.spot--load-more {
  flex: 0 0 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed #ddd;
  border-radius: 1rem;
  color: var(--secondary-text-color, #666);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  text-decoration: none;
  scroll-snap-align: start;

  &:hover {
    border-color: #aaa;
    color: var(--primary-text-color);
  }
}

.spot-list__separator {
  flex: 0 0 2px;
  background: #ddd;
  border-radius: 2px;
  align-self: stretch;
  scroll-snap-align: none;
}