/* Keep swipeable card rails viewport-wide while their headings stay in the content grid. */
@media (max-width: 1023px) {
  :is(
    .fenix-cases__grid,
    .fenix-home-case-grid,
    .fenix-home-article-grid,
    .fenix-case-detail-related__grid,
    .fenix-testimonial-detail-related__grid,
    .fenix-testimonials-cases__grid,
    .fenix-blog-detail-related__grid
  ),
  html body.home.fenix-figma-shell-page .fenix-home-case-grid,
  html body.home.fenix-figma-shell-page .fenix-home-article-grid,
  html body.fenix-figma-testimonials-page .fenix-testimonials-page > .fenix-home-cases .fenix-home-case-grid {
    --fenix-rail-gutter: 32px;
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: 0 !important;
    padding-left: var(--fenix-rail-gutter) !important;
    padding-right: var(--fenix-rail-gutter) !important;
    box-sizing: border-box !important;
    scroll-padding-inline: var(--fenix-rail-gutter);
  }

  .fenix-blog-detail-related__grid {
    --fenix-rail-gutter: 48px;
  }
}

@media (max-width: 767px) {
  :is(
    .fenix-cases__grid,
    .fenix-home-case-grid,
    .fenix-home-article-grid,
    .fenix-case-detail-related__grid,
    .fenix-testimonial-detail-related__grid,
    .fenix-testimonials-cases__grid,
    .fenix-blog-detail-related__grid
  ),
  html body.home.fenix-figma-shell-page .fenix-home-case-grid,
  html body.home.fenix-figma-shell-page .fenix-home-article-grid,
  html body.fenix-figma-testimonials-page .fenix-testimonials-page > .fenix-home-cases .fenix-home-case-grid {
    --fenix-rail-gutter: 16px;
  }

  .fenix-blog-detail-related__grid {
    --fenix-rail-gutter: 24px;
  }
}