/*
 * Mobile / tablet fixes layered on top of the theme (style.css).
 * The theme sets body { overflow-x: hidden }, so anything wider than the screen
 * gets silently clipped on phones instead of scrolling. Keep every rule here
 * scoped to small screens so the desktop layout is unchanged.
 */

img {
  max-width: 100%;
}

@media only screen and (max-width: 1199px) {
  /* Theme spacing utilities (e.g. .ptb--40 = padding: 40px 0 !important) strip the
     container's side padding while its rows keep negative margins */
  .container,
  .container-fluid,
  .container[class*="ptb--"],
  .container[class*="plr--"] {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}

@media only screen and (max-width: 991px) {
  /* Theme's own full-width containers have no side padding to absorb row margins */
  .container-full > .row,
  .container-80 > .row {
    margin-left: 0;
    margin-right: 0;
  }

  /* .g-5 rows pull out 24px each side, more than the container pads */
  .g-5,
  .gx-5 {
    --bs-gutter-x: 1.5rem;
  }

  /* Theme pulls the about image 30px past its column */
  .about-image-left-wrapper {
    margin-right: 0;
  }
}