/*
 * Theme's responsive.css pins .content_wrap (and column-fraction helpers)
 * to fixed pixel widths per breakpoint, tuned for a 320px phone baseline
 * (e.g. 280px content on any viewport up to 479px). On the 375-428px
 * phones common today, that leaves 45-65px of unused margin per side,
 * so pages read as narrow instead of filling the screen. Swap the fixed
 * widths for fluid ones that keep the same ~20px side margin at any
 * width inside each bucket, loaded after translogic-responsive so it
 * wins the cascade without !important.
 */
@media (max-width: 479px) {
	.sc_content_width_1_1,
	.content_wrap,
	.content_container {
		width: calc(100% - 40px);
	}
	.sc_content_width_1_1,
	.sc_content_width_1_2,
	.sc_content_width_1_3,
	.sc_content_width_2_3,
	.sc_content_width_3_4 {
		width: 100%;
	}
	.sc_content_width_1_4 {
		width: 50%;
	}
}

@media (min-width: 480px) and (max-width: 639px) {
	.sc_content_width_1_1,
	.content_wrap,
	.content_container {
		width: calc(100% - 40px);
	}
	.sc_content_width_1_1,
	.sc_content_width_1_2,
	.sc_content_width_2_3,
	.sc_content_width_3_4 {
		width: 100%;
	}
	.sc_content_width_1_3,
	.sc_content_width_1_4 {
		width: 50%;
	}
}

/*
 * Separate bug: style.css gives "fullwide" pages (used by the individual
 * sea/land/air-freight service pages) a fixed 130px left/right padding on
 * .content_wrap as a desktop gutter — never reduced at any breakpoint. On a
 * 375px phone that's 260px of padding, leaving ~115px (about 30%) for the
 * actual content, which is what was reported as "narrow, and header/footer
 * too" (the same .content_wrap selector styles the header/footer rows).
 * The sidebar_left/right + fullwide combo has the same problem via a 430px
 * padding on .content instead of .content_wrap.
 */
@media (max-width: 767px) {
	.body_style_fullwide .content_wrap {
		padding-left: 20px;
		padding-right: 20px;
	}
	.body_style_fullwide.sidebar_right .content,
	.body_style_fullscreen.sidebar_right .content,
	.body_style_fullwide.sidebar_left .content,
	.body_style_fullscreen.sidebar_left .content {
		padding-left: 20px;
		padding-right: 20px;
	}
}