/* News Swiper CSS - Mobile horizontal scroll */

/* Desktop: Keep normal flex layout */
.news-grid {
  display: flex;
  gap: 24px;
  width: 100%;
}

.swiper-news-grid .swiper-wrapper {
  gap: 24px;
}

.news-grid .news-card {
  flex: 1;
  min-width: 0;
}

/* Mobile: Enable swiper with horizontal scrolling */
@media (max-width: 768px) {
  .swiper-news-grid {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: -16px !important;
    margin-right: -16px !important;
    padding-left: 16px !important;
    padding-right: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .swiper-news-grid .swiper-wrapper {
    display: flex !important;
    gap: 16px !important;
    flex-wrap: nowrap !important;
  }

  .swiper-news-grid .swiper-wrapper::after {
    content: '';
    flex: 0 0 8px;
    width: 8px;
  }

  .swiper-news-grid .swiper-slide {
    flex: 0 0 auto !important;
    width: 253px !important;
    height: auto !important;
  }
}

@media (max-width: 480px) {
  .swiper-news-grid .swiper-slide {
    width: 240px !important;
  }
}