@use "@/styles/media" as *;
$gap: 16px;
.lofty-listing {
  display: flex;
  gap: $gap;
  @include media-600 {
    flex-wrap: wrap;
  }
  .list-card {
    @include media-600 {
      width: 100%;
    }
  }
}
@media (min-width: 900px) and (max-width: 1480px) {
  .list-card {
    width: calc((100% - 2 * $gap) / 3);
  }
}
@media (min-width: 1481px) {
  .list-card {
    width: calc((100% - 3 * $gap) / 4);
  }
}
.lofty-more {
  margin: 40px auto;
  min-width: 200px;
  width: fit-content;
  padding: 0 20px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: solid 1px #111;
  font-family: var(--lofty-font-regular);
  @include media-600 {
    margin-top: 20px;
  }
  &:hover {
    background-color: rgba(0, 0, 0, 0.1);
  }
}