/* =============================================================================
- Broken Grid
============================================================================= */
.e-con-inner > .elementor-widget-gwel-posts-broken,
.e-con-inner > .elementor-widget-gwel-gallery-broken {
	width: var(--container-widget-width);
	--flex-grow: var(--container-widget-flex-grow);
}
.gwel-broken-grid {
	&.gwel-layout-1 {
		.gwel-broken-container {
			display: grid;
			grid-template-columns: 2fr 2fr 2fr 2fr 2fr;
			// align-items: center;
			// justify-items: center;
			column-gap: 5vw;
			row-gap: 5vw;
			.gwel-broken-item:nth-child(4n + 1) {
				grid-column: 2 / 4;
			}
			.gwel-broken-item:nth-child(4n + 2) {
				grid-column: 4 / 6;
				margin-top: 5vw;
			}
			.gwel-broken-item:nth-child(4n + 3) {
				grid-column: 1 / 3;
				margin-top: 5vw;
				align-self: end;
			}
			.gwel-broken-item:nth-child(4n) {
				grid-column: 3 / 6;
			}
		}
	}
	&.gwel-layout-2 {
		.gwel-broken-container {
			display: grid;
			grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
			column-gap: 5vw;
			row-gap: 5vw;
			.gwel-broken-item:nth-child(4n + 1) {
				grid-column: 2 / 4;
				align-self: center;
			}
			.gwel-broken-item:nth-child(4n + 2) {
				grid-column: 4 / 8;
			}
			.gwel-broken-item:nth-child(4n + 3) {
				grid-column: 1 / 4;
			}
			.gwel-broken-item:nth-child(4n + 4) {
				grid-column: 4 / 7;
				align-self: center;
			}
			.gwel-broken-item:nth-child(12n + 11) {
				grid-column: 2 / 6;
			}
			.gwel-broken-item:nth-child(12n + 12) {
				grid-column: 6 / 9;
			}
		}
	}
	&.gwel-layout-3 {
		.gwel-broken-container {
			display: grid;
			grid-template-columns: 6fr 4fr 4fr;
			column-gap: 5vw;
			row-gap: 15vw;
			.gwel-broken-item:nth-child(2n) {
				margin-top: 10vw;
				grid-column: 3 / 4;
			}
			.gwel-broken-item:nth-child(3n) {
				grid-column: 1 / 3;
			}
			.gwel-broken-item:nth-child(5n) {
				grid-column: 2 / 3;
			}
			.gwel-broken-item:nth-child(10n) {
				grid-column: 1 / 2;
			}
		}
	}

	&.gwel-layout-4 {
		.gwel-broken-container {
			display: grid;
			grid-template-columns: 6fr 6fr 6fr;
			column-gap: 5vw;
			row-gap: 5vw;
			align-items: center;
			.gwel-broken-item:nth-child(2n) {
				grid-column: 2 / 4;
			}
			.gwel-broken-item:nth-child(3n) {
				grid-column: 1 / 3;
				padding-left: 8vw;
			}
			.gwel-broken-item:nth-child(5n) {
				grid-column: 1 / 3;
				padding-left: 3vw;
			}
			.gwel-broken-item:nth-child(16n) {
				grid-column: 3 / 4;
				padding-left: 3vw;
			}
			.gwel-broken-item:nth-child(18n) {
				grid-column: 2 / 4;
			}
		}
	}

	.gwel-animation-item {
		transition: transform .4s ease, opacity .4s ease;
		&.gwel-fade-in {
			opacity: 0;
		}
		&.gwel-fade-in-up {
			opacity: 0;
			transform: translate(0px,-30px) scale(1);
		}
		&.gwel-fade-in-down {
			opacity: 0;
			transform: translate(0px,30px) scale(1);
		}
		&.gwel-fade-in-left {
			opacity: 0;
			transform: translate(-30px,0px) scale(1);
		}
		&.gwel-fade-in-right {
			opacity: 0;
			transform: translate(30px,0px) scale(1);
		}
		&.gwel-zoom-in {
			opacity: 0;
			transform: translate(30px,0px) scale(0.8);
		}
		&.gwel-animated {
			opacity: 1;
			transform: translate(0px,0px) scale(1);
		}
	}

	@include max-break($break-mobile){
		&.gwel-layout-1,
		&.gwel-layout-2,
		&.gwel-layout-3,
		&.gwel-layout-4 {
			.gwel-broken-container {
				display: block;
				.gwel-broken-item {
					padding: 0;
					margin: 0 0 3.000rem 0;
				}
			}
		}
	}
}