/* Shared responsive layout adjustments. Component typography lives with its role. */
@media (max-width: 1200px) {
  .film-card-item {
    flex-basis: 290px;
  }
}

@media (max-width: 992px) {
  .film-card-item {
    flex-basis: 260px;
  }

  .knots-masonry-grid {
    grid-template-columns: repeat(6, 1fr);
  }

  .grid-w-4,
  .grid-w-6 {
    grid-column: span 3;
  }

  .grid-w-12 {
    grid-column: span 6;
  }
}

@media (max-width: 768px) {
  .film-slider-wrapper {
    padding: 0;
  }

  .slider-arrow {
    display: none;
  }

  .film-card-item {
    flex-basis: 82vw;
  }

  .featured-stories .section-heading {
    margin-bottom: 42px;
  }

  .featured-stories-slider {
    margin-inline: -4px;
  }

  .featured-stories-slider .story-content {
    padding: 22px 18px 26px;
  }

  .knots-masonry-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .grid-item,
  .grid-w-4,
  .grid-w-6,
  .grid-w-12 {
    grid-column: span 1;
  }

  .grid-h-2,
  .grid-h-4 {
    aspect-ratio: 3 / 4;
  }

  .custom-cursor-dot,
  .custom-cursor-follower {
    display: none;
  }
}

@media (max-width: 576px) {
  .mobile-nav-list {
    gap: 22px;
  }
}