/**
 * ============================================================================
 * ARTICLE COMMENTS - RESPONSIVE STYLES
 * ============================================================================
 * Media queries for responsive behavior across different screen sizes.
 * Ensures optimal display on mobile, tablet, and desktop devices.
 * ============================================================================
 */

/* ========================================================================== */
/* TABLET BREAKPOINT - MEDIUM SCREENS (768px and below) */
/* ========================================================================== */
@media (max-width: 768px) {
  .article-comments {
    margin: 32px 0;
  }

  .article-comments__title {
    font-size: 24px;
  }

  .article-comments__container {
    padding: 24px;
  }
}

/* ========================================================================== */
/* MOBILE BREAKPOINT - SMALL SCREENS (480px and below) */
/* ========================================================================== */
@media (max-width: 480px) {
  .article-comments {
    margin: 24px 0;
  }

  .article-comments__title {
    font-size: 20px;
  }

  .article-comments__container {
    padding: 20px 16px;
  }

  .article-comments__noscript {
    font-size: 14px;
    padding: 30px 16px;
  }
}