.hotelListingSection {
  --scroll-margin-top: calc(
    var(--booking-widget-mobile-height) + var(--Spacing-x2)
  );

  display: grid;
  gap: var(--Space-x3);
  scroll-margin-top: var(--scroll-margin-top);

  &.isMainBlock .heading {
    color: var(--Text-Heading);
  }
}

.header {
  display: grid;
  grid-template-columns: 1fr max-content;
  gap: var(--Space-x15);
}

.preamble {
  grid-column: span 2;
}

.list {
  list-style: none;
  display: grid;
  gap: var(--Space-x4);
}

.listItem.hidden {
  display: none;
}

@media screen and (min-width: 768px) {
  .hotelListingSection {
    --scroll-margin-top: calc(
      var(--booking-widget-tablet-height) + var(--Spacing-x2)
    );

    &.isMainBlock {
      gap: var(--Space-x5);
    }
  }
  .list {
    row-gap: var(--Space-x5);
    column-gap: var(--Space-x2);
  }
}

@media screen and (min-width: 768px) and (max-width: 949px) {
  .list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (min-width: 950px) {
  .list {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media screen and (min-width: 1367px) {
  .hotelListingSection {
    --scroll-margin-top: calc(
      var(--booking-widget-desktop-height) + var(--Spacing-x2)
    );
  }
}