Add support for Breakpoints specified in Elementor to the Hello theme

[vovkasolovev]

In Elemntor Pro, you can specify a breakpoint width that affects the .elementor-container.

Right now, the Hello theme has breakpoints that are hardcoded into the style. If you change the breakpoints in Elementor Pro, it will have no effect on the theme.

Here's what those theme CSS lines look like:

@media (min-width:576px) {
	.site-footer .footer-inner,
	.site-footer:not(.dynamic-footer),
	.site-header .header-inner,
	.site-header:not(.dynamic-header),
	body:not([class*=elementor-page-]) .site-main {
		max-width: 500px
	}
	.site-footer.footer-full-width .footer-inner,
	.site-header.header-full-width .header-inner {
		max-width: 100%
	}
}

@media (min-width:768px) {
	.site-footer .footer-inner,
	.site-footer:not(.dynamic-footer),
	.site-header .header-inner,
	.site-header:not(.dynamic-header),
	body:not([class*=elementor-page-]) .site-main {
		max-width: 600px
	}
	.site-footer.footer-full-width,
	.site-header.header-full-width {
		max-width: 100%
	}
}

@media (min-width:992px) {
	.site-footer .footer-inner,
	.site-footer:not(.dynamic-footer),
	.site-header .header-inner,
	.site-header:not(.dynamic-header),
	body:not([class*=elementor-page-]) .site-main {
		max-width: 800px
	}
	.site-footer.footer-full-width,
	.site-header.header-full-width {
		max-width: 100%
	}
}

@media (min-width:1200px) {
	.site-footer .footer-inner,
	.site-footer:not(.dynamic-footer),
	.site-header .header-inner,
	.site-header:not(.dynamic-header),
	body:not([class*=elementor-page-]) .site-main {
		max-width: 960px
	}
	.site-footer .footer-inner,
	.site-header .header-inner {
		max-width: 1140px
	}
	.site-footer.footer-full-width,
	.site-header.header-full-width {
		max-width: 100%
	}
}

Since the Hello theme is designed to work in conjunction with Elementor, I propose to add passing breakpoints using variables.

For example, replace (CSS simplified, for clarity)

@media (min-width:1200px) {
.site-main {max-width: 1140px} 
}

to

@media (min-width: var(--e-container-desktop-media-min-width) ) {
.site-main {max-width: 1140px;
max-width: var(--e-container-desktop-max-width) }
}

Make the appropriate variables in Elementor. If they are defined, the theme will adjust to these settings. If not, there will be a fallback.