/**
 * The site gutter.
 *
 * One value, used by every JMeks widget that has to decide how far its content
 * sits from the edge of the screen. It matches the padding set on the ordinary
 * containers around them — 80px, down to 40px on a landscape tablet, 32px on a
 * portrait tablet and 20px on a phone — so a full-bleed widget's copy lines up
 * with a boxed section's without either restating the number.
 *
 * The breakpoints are the site's Elementor ones — Tablet Landscape (1200px, not
 * on by default), Tablet Portrait (1024px) and Mobile Portrait (767px) — so the
 * steps land where the panel's device switcher says they do. Move one there and
 * it has to move here too.
 *
 * Widgets read it through their own property with this as the fallback, so a
 * single widget can still be given a different gutter without affecting the
 * rest:
 *
 *   --jmeks-panel-gutter    Split Panels
 *   --jmeks-stagger-gutter  Staggered Cards
 *
 * Anything set in the Elementor panel outranks all of it.
 *
 * Keep this in step with Site Settings > Layout > Container Padding. Nothing
 * enforces that: the widgets read this value, ordinary containers read
 * Elementor's, and they only line up because both say the same thing.
 */

:root {
	--jmeks-gutter: 80px;
}

@media ( max-width: 1200px ) {
	:root {
		--jmeks-gutter: 40px;
	}
}

@media ( max-width: 1024px ) {
	:root {
		--jmeks-gutter: 32px;
	}
}

@media ( max-width: 767px ) {
	:root {
		--jmeks-gutter: 20px;
	}
}