/* Full-width containers + nice side padding on any screen */
:root {
  /* 16px on phones → up to 32px on big screens */
  --site-gutter: clamp(16px, 3vw, 32px);
}

.container,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
  max-width: 100% !important;                /* stay full width */
  padding-left:  var(--site-gutter) !important;
  padding-right: var(--site-gutter) !important;
}

/* If you use container-fluid anywhere, give it the same gutters */
.container-fluid {
  padding-left:  var(--site-gutter);
  padding-right: var(--site-gutter);
}