/* Mobile and Tablet Gutter Reduction */
@media screen and (max-width: 768px) {
  .row {
    --bs-gutter-x: 1rem !important; /* Reduce from 30px to ~16px on mobile/tablet */
  }
}

/* Small Mobile */
@media screen and (max-width: 576px) {
  .container {
    padding-right: 15px !important;
    padding-left: 15px !important;
  }
  
  [class*="col-"] {
    padding-right: 10px !important;
    padding-left: 10px !important;
  }
}

/* Keep Desktop Gutter as-is */
@media screen and (min-width: 769px) {
  .row {
    --bs-gutter-x: 24px; /* Bootstrap default is good enough for desktop */
  }
}