@media (max-width: 768px) {
   #main-content {
      width: 100%;
      padding: 0 clamp(1rem, 4vw, 1.35rem);
   }

   .site-header {
      flex-wrap: wrap;
      align-items: flex-start;
   }

   .hero-name {
      font-size: clamp(1.85rem, 6vw, 2.35rem);
   }

   .narrative {
      flex-direction: column;
      align-items: stretch;
   }

   .profile {
      width: 100%;
      max-width: 100%;
      padding: 1rem 1rem 0;
   }

   .readme-container {
      max-width: 100%;
      padding: 0.75rem 1rem 1.25rem;
   }

   .readme {
      padding: 1rem !important;
      font-size: 14px;
      word-wrap: break-word;
      overflow-wrap: break-word;
      max-width: 100%;
   }

   .readme pre {
      max-width: 100%;
      overflow-x: auto;
      white-space: pre-wrap;
      word-wrap: break-word;
   }

   .readme code {
      word-wrap: break-word;
      overflow-wrap: break-word;
   }

   .readme table {
      max-width: 100%;
      overflow-x: auto;
      display: block;
   }

   .readme img {
      max-width: 100%;
      height: auto;
   }

   .projects-filter-strip {
      justify-content: flex-start;
   }

   .projects-grid {
      grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
      gap: 1.1rem;
   }

   .about-me-header {
      flex-wrap: wrap;
      gap: 10px;
   }

   #filter-input {
      width: clamp(11rem, 48vw, 100%);
      max-width: 100%;
   }
}