/*
 * Public-site gutters.
 *
 * Loaded after the theme's styles.css by home.blade.php and layouts/public.blade.php
 * (the only two places that render partials/public-header + public-footer).
 *
 * The theme ships `.custom-container` with a flat 12px side padding. Combined with
 * its 1410px max-width that means on a 1440px laptop the whole public site sits
 * ~27px from the viewport edge, and on a phone the copy all but touches it. Widen
 * the gutter responsively so the header, page content and footer share one set of
 * rails with real breathing room. Padding rather than margin, because `.custom-container`
 * is border-box and already centres itself with `margin: 0 auto`.
 */
.custom-container {
  padding-left: 20px;
  padding-right: 20px;
}

@media (min-width: 768px) {
  .custom-container {
    padding-left: 32px;
    padding-right: 32px;
  }
}

@media (min-width: 1200px) {
  .custom-container {
    padding-left: 48px;
    padding-right: 48px;
  }
}