/*
 * 15px side gutters on phones and tablets.
 *
 * Divi centres page content in rows 80% wide (max 1080px), and this rebuild
 * reproduces that - which leaves 39px of space each side at 390px and 77px at
 * 768px. Requested change: no more than 15px anywhere up to 1024px, on the
 * pages, the header bar and the footer alike.
 *
 * Desktop (1025px and up) is untouched: content stays centred at 1080px.
 *
 * Loaded after the generated per-page files, so it overrides their 80% rows;
 * !important because those rules carry the same weight.
 */

@media only screen and (max-width: 1024px) {

	/* every boxed row on a converted page, the header bar, and the footer */
	body .elementor .e-con.e-con-boxed > .e-con-inner,
	body #masthead .e-con.e-con-boxed > .e-con-inner {
		width: calc(100% - 30px) !important;
		max-width: calc(100% - 30px) !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	/* the blog listing, the single post view and the case study archive */
	.eldm-blogs .eldm-row,
	.eldm-case-study .eldm-row,
	.eldm-single .eldm-container {
		width: calc(100% - 30px) !important;
		max-width: calc(100% - 30px) !important;
	}

	/* the hand-coded landing pages set their own 24px / 48px insets */
	.wrap,
	.hero-inner {
		padding-left: 15px !important;
		padding-right: 15px !important;
	}

	/* The case study slider (Smart Slider, on portfolio, the case studies and the
	   home page) keeps its desktop padding of 60px 100px 100px 10px on a phone,
	   which leaves the quote about 120px wide - one word per line. Live does this
	   too. Room for the text instead. */
	.n2-ss-slider .n2-ss-layer-row {
		padding: 20px 10px !important;
	}

	/* Images are centred on phones and tablets. Divi aligns several of them to
	   the right up to 980px (the home page hero among them) and only centres
	   them on phones; requested change. */
	body .elementor .elementor-widget-image {
		--align-self: center !important;
		align-self: center !important;
		text-align: center !important;
	}

	body .elementor .elementor-widget-image img {
		margin-left: auto !important;
		margin-right: auto !important;
	}

	.eldm-blogs .eldm-hero-media,
	.eldm-case-study .eldm-hero-media,
	.eldm-single .eldm-post img {
		margin-left: auto !important;
		margin-right: auto !important;
	}
}