/* Homepage swipe carousels. These rules are intentionally limited to phones. */
@media (max-width: 575px) {
  .tripoffers-home-page .tripoffers-four-items-grid,
  .tripoffers-home-page .tripoffers-quick-flight-grid {
    display: flex;
    gap: 12px;
    margin-right: -12px;
    padding: 2px 12px 12px 2px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .tripoffers-home-page .tripoffers-four-items-grid::-webkit-scrollbar,
  .tripoffers-home-page .tripoffers-quick-flight-grid::-webkit-scrollbar {
    display: none;
  }

  .tripoffers-home-page .tripoffers-four-item-card,
  .tripoffers-home-page .tripoffers-quick-flight-card {
    flex: 0 0 calc(100% - 28px);
    scroll-snap-align: start;
  }

  .tripoffers-home-page .tripoffers-four-item-card {
    border-radius: 18px;
  }

  .tripoffers-home-page .tripoffers-quick-flights {
    padding-block: 42px;
    margin-top: 80px;
  }

  .tripoffers-home-page .tripoffers-quick-flight-card {
    padding: 17px;
    border-radius: 16px;
  }

  .tripoffers-home-page .tripoffers-mobile-carousel-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    min-height: 26px;
    margin-top: 2px;
  }

  .tripoffers-home-page .tripoffers-mobile-carousel-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #cbd5e1;
    cursor: pointer;
    transition: width .2s ease, background-color .2s ease;
  }

  .tripoffers-home-page .tripoffers-mobile-carousel-dot[aria-current="true"] {
    width: 20px;
    background: var(--color-secondary);
  }
}

@media (min-width: 576px) {
  .tripoffers-mobile-carousel-dots { display: none !important; }
}