/* 
 * Main CSS file - Fix for missing main.css 
 * This is a companion to styles.css
 */

/* Any specific overrides for mobile optimization */
@media (max-width: 480px) {
  .container {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* iPhone SE and small screens */
@media (max-width: 375px) {
  .container {
    padding-left: 10px;
    padding-right: 10px;
  }
  
  h1 {
    font-size: 1.75rem;
  }
  
  h2 {
    font-size: 1.5rem;
  }
  
  .post-card-title {
    font-size: 1.25rem;
  }
}

/* Very small screens like iPhone SE (320px) */
@media (max-width: 320px) {
  .container {
    padding-left: 8px;
    padding-right: 8px;
  }
  
  h1 {
    font-size: 1.6rem;
  }
  
  h2 {
    font-size: 1.4rem;
  }
  
  .post-card-title {
    font-size: 1.15rem;
  }
}