.e-con {
	// Set to initial values in order to avoid inheritance which might cause unexpected behavior.
	--border-radius: 0;
	--border-top-width: 0px;
	--border-right-width: 0px;
	--border-bottom-width: 0px;
	--border-left-width: 0px;
	--border-style: initial;
	--border-color: initial;
	--container-widget-width: 100%;
	--container-widget-height: initial;
	--container-widget-flex-grow: 0;
	--container-widget-align-self: initial;
	// Use the width from `Site Settings` or default to 1140px.
	// Take the smaller value in order to fix bug ED-6712 where the content-width (AKA "padding hack", see below)
	// isn't working properly.
	--content-width: min(100%, var(--container-max-width, 1140px));
	--width: 100%;
	--min-height: initial;
	--height: auto;
	--text-align: initial;
	--margin-top: 0px;
	--margin-right: 0px;
	--margin-bottom: 0px;
	--margin-left: 0px;
	--padding-top: var(--container-default-padding-top, 10px);
	--padding-right: var(--container-default-padding-right, 10px);
	--padding-bottom: var(--container-default-padding-bottom, 10px);
	--padding-left: var(--container-default-padding-left, 10px);
	--position: relative;
	--z-index: revert;
	--overflow: visible;
	--gap: var(--widgets-spacing, 20px); // Use the gap from `Site Settings` or default to 20px.
	--row-gap: var(--widgets-spacing-row, 20px);
	--column-gap: var(--widgets-spacing-column, 20px);
	--overlay-mix-blend-mode: initial;
	--overlay-opacity: 1;
	--overlay-transition: 0.3s;
	--e-con-grid-template-columns: repeat(3, 1fr);
	--e-con-grid-template-rows: repeat(2, 1fr);
	position: var(--position);
	width: var(--width);
	// Set `min-width` to fix nested Containers shrink bug (ED-4964).
	// Ref: https://stackoverflow.com/questions/43934648/how-to-make-flexbox-items-shrink-correctly-when-in-a-nested-container
	min-width: 0;
	min-height: var(--min-height);
	height: var(--height);
	border-radius: var(--border-radius);
	z-index: var(--z-index);
	overflow: var(--overflow);
	--flex-wrap-mobile: wrap;

	&:where(:not(.e-div-block-base)) {
		transition: background var(--background-transition, 0.3s), border var(--border-transition, 0.3s), box-shadow var(--border-transition, 0.3s), transform var(--e-con-transform-transition-duration, 0.4s);
	}

	& {
		--margin-block-start: var(--margin-top);
		--margin-block-end: var(--margin-bottom);
		--margin-inline-start: var(--margin-left);
		--margin-inline-end: var(--margin-right);
		--padding-inline-start: var(--padding-left);
		--padding-inline-end: var(--padding-right);
		--padding-block-start: var(--padding-top);
		--padding-block-end: var(--padding-bottom);
		--border-block-start-width: var(--border-top-width);
		--border-block-end-width: var(--border-bottom-width);
		--border-inline-start-width: var(--border-left-width);
		--border-inline-end-width: var(--border-right-width);
	}

	body.rtl & {
		--padding-inline-start: var(--padding-right);
		--padding-inline-end: var(--padding-left);
		--margin-inline-start: var(--margin-right);
		--margin-inline-end: var(--margin-left);
		--border-inline-start-width: var(--border-right-width);
		--border-inline-end-width: var(--border-left-width);
	}

	margin-block-start: var(--margin-block-start);
	margin-inline-end: var(--margin-inline-end);
	margin-block-end: var(--margin-block-end);
	margin-inline-start: var(--margin-inline-start);
	padding-inline-start: var(--padding-inline-start);
	padding-inline-end: var(--padding-inline-end);

	&.e-flex {
		--flex-direction: column;
		--flex-basis: auto;
		--flex-grow: 0;
		--flex-shrink: 1;
		flex: var(--flex-grow) var(--flex-shrink) var(--flex-basis);
	}

	&-full,
	& > .e-con-inner {
		text-align: var(--text-align);
		padding-block-start: var(--padding-block-start);
		padding-block-end: var(--padding-block-end);
	}

	&-full.e-flex,
	&.e-flex > .e-con-inner {
		flex-direction: var(--flex-direction);
	}

	&,
	& > .e-con-inner {
		display: var(--display);
	}

	&.e-grid {
		--grid-justify-content: start;
		--grid-align-content: start;
		--grid-auto-flow: row;
	}

	&.e-grid,
	&.e-grid > .e-con-inner {
		grid-template-columns: var( --e-con-grid-template-columns );
		grid-template-rows: var( --e-con-grid-template-rows );
		justify-content: var(--grid-justify-content);
		align-content: var(--grid-align-content);
		grid-auto-flow: var(--grid-auto-flow);
		justify-items: var(--justify-items);
		align-items: var(--align-items);
	}

	// Set default values to the outer div of the boxed container.
	&-boxed.e-flex {
		flex-direction: column;
		flex-wrap: initial;
		justify-content: initial;
		align-items: initial;
		align-content: initial;
	}

	&-boxed.e-grid {
		justify-items: initial;
		grid-template-columns: 1fr;
		grid-template-rows: 1fr;
	}

	&-boxed {
		text-align: initial;
		gap: initial;
	}

	&.e-flex > .e-con-inner {
		flex-wrap: var(--flex-wrap);
		justify-content: var(--justify-content);
		align-items: var(--align-items);
		align-content: var(--align-content);
		// Set default values to the inner div of the boxed container.
		flex-basis: initial;
		// Ensure that the inner div covers the full height of the container.
		flex-grow: 1;
		flex-shrink: initial;
		align-self: initial;
	}

	&.e-grid > .e-con-inner {
		justify-items: var(--justify-items);
		align-items: var(--align-items);
	}

	& > .e-con-inner {
		gap: var(--row-gap) var(--column-gap);
		width: 100%;
		max-width: var(--content-width);
		margin: 0 auto;
		padding-inline-start: 0;
		padding-inline-end: 0;
		height: 100%;
	}

	:is( .elementor-section-wrap, [data-elementor-id] ) > & {
		// Default top-level containers to be centered.
		--margin-left: auto;
		--margin-right: auto;

		// Use the `min()` function to fix cases when a top-level Container is 100% width due to `max-width: 100%;`,
		// or cases when a nested Container overflows the parent Container due to `max-width: 1140px;`.
		// Capital `M` in order to use the CSS function and not the SCSS one.
		max-width: min(100%, var(--width));
	}

	// Hack to increase specificity and avoid using `!important`.
	.elementor-widget.elementor-widget {
		// Override the default margin-block-end of widgets.
		margin-block-end: 0;
	}

	@mixin border-radius-for-background-elements {
		border-radius: var(--border-radius);
		border-style: var(--border-style);
		border-color: var(--border-color);
		border-block-start-width: var(--border-block-start-width);
		border-inline-end-width: var(--border-inline-end-width);
		border-block-end-width: var(--border-block-end-width);
		border-inline-start-width: var(--border-inline-start-width);
		top: calc(0px - var(--border-top-width));
		left: calc(0px - var(--border-left-width));
		width: max(calc(100% + var(--border-left-width) + var(--border-right-width)), 100%);
		height: max(calc(100% + var(--border-top-width) + var(--border-bottom-width)), 100%);
	}

	// Background overlay.
	&::before,
	:is( &, & > .e-con-inner ) > .elementor-background-video-container::before,
	> .elementor-motion-effects-container > .elementor-motion-effects-layer::before,
	> .elementor-background-slideshow::before {
		// Render the background overlay only if it's being used - Determined by passing a CSS var from the background
		// control with an empty string (e.g. `--background-overlay: '';`).
		content: var(--background-overlay);
		display: block;
		position: absolute;
		mix-blend-mode: var(--overlay-mix-blend-mode);
		opacity: var(--overlay-opacity);
		transition: var(--overlay-transition, 0.3s);
		@include border-radius-for-background-elements;
	}

	&::before {
		transition: background var(--overlay-transition, 0.3s), border-radius var(--border-transition, 0.3s), opacity var(--overlay-transition, 0.3s);
	}

	> .elementor-background-slideshow,
	:is( &, & > .e-con-inner ) > .elementor-background-video-container {
		@include border-radius-for-background-elements;
	}

	@media (max-width: $screen-mobile-max) {
		:is( &, & > .e-con-inner ) > .elementor-background-video-container.elementor-hidden-mobile {
			display: none;
		}
	}

	:is( &, & > .e-con-inner ) > .elementor-background-video-container::before {
		z-index: $first-layer;
	}

	:is( &, & > .e-con-inner ) > .elementor-background-slideshow::before {
		z-index: $second-layer;
	}

	.elementor-widget {
		// Fix swiper-based widgets (ED-6716).
		// Since the default is `min-width: auto` for flex items.
		min-width: 0;
		// Fix iframe-based widgets (ED-5338) & widget with empty placeholder.
		&-video,
		&-google_maps,
		&-empty {
			width: 100%;
		}

		// Fix swiper-based widgets broken (ED-6849).
		// TODO: Use `:has( .swiper )` selector when available && remove this class from `frontend/utils/swiper.js`.
		&.e-widget-swiper {
			width: 100%;
		}
	}

	&,
	& > .e-con-inner {

		& > .elementor-widget {

			& > .elementor-widget-container {
				// Fix align-self:stretch (ED-7359)
				height: 100%;
			}
		}
	}

	// Hack with repeated classnames to increase the specificity.
	.elementor.elementor &,
	&.e-con > .e-con-inner {
		// This was done to make sure that the widgets inside containers do not exceed the container's max width.
		& > .elementor-widget {
			max-width: 100%;
		}
	}

	.elementor-widget {

		&:not(:last-child) {
			--kit-widget-spacing: 0px;
		}
	}
}

@media (max-width: $editor-screen-sm-max) {
	.e-con.e-flex {
		--width: 100%;
		--flex-wrap: var(--flex-wrap-mobile);

		.elementor-widget-archive-posts {
			width: 100%;
		}
	}
}
