.roomsContainer {
  position: relative;
  scroll-margin-top: var(--hotel-page-scroll-margin-top);
  color: var(--Text-Default);
}

.sectionHeader {
  display: grid;
  gap: var(--Space-x15);
  max-width: var(--hotel-page-intro-section-width);
}

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

.scrollRef {
  position: absolute;
  top: calc(-1 * var(--hotel-page-scroll-margin-top));
}

.roomsList {
  display: grid;
  gap: var(--Space-x2);
  grid-template-columns: 1fr;
  list-style: none;

  &:not(.allVisible) > :nth-child(n + 4) {
    display: none;
  }
}

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

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