/* -------------------------------------------
	Grid
---------------------------------------------- */
.row {
	display: flex;
	flex-wrap: wrap;
	width: calc( 100% + 2 * #{get(base, _gutter-md)} );

	margin-left: calc(-1 * var(--rio-gutter-md));
	margin-right: calc(-1 * var(--rio-gutter-md));

	> * {
		position: relative;
		width: 100%;

		padding-left: var(--rio-gutter-md);
		padding-right: var(--rio-gutter-md);
	}
}
.gutter-lg {
	margin-left: calc(-1 * var(--rio-gutter-lg));
	margin-right: calc(-1 * var(--rio-gutter-lg));
	width: calc( 100% + 2 * var(--rio-gutter-lg) );

	> * {
		padding-left: var(--rio-gutter-lg);
		padding-right: var(--rio-gutter-lg);
	}
}
.gutter-sm {
	margin-left: calc(-1 * var(--rio-gutter-sm));
	margin-right: calc(-1 * var(--rio-gutter-sm));
	width: calc( 100% + 2 * var(--rio-gutter-sm) );

	> * {
		padding-left: var(--rio-gutter-sm);
		padding-right: var(--rio-gutter-sm);
	}
}
.gutter-xs {
	margin-left: -1px;
	margin-right: -1px;
	width: calc( 100% + 2px );

	> * {
		padding-left: 1px;
		padding-right: 1px;
	}
}
.gutter-no {
	margin-left: 0;
	margin-right: 0;
	width: 100%;
	> * {
		padding-left: 0;
		padding-right: 0;
	}
}

@include cols-css();
@if use(order-first) { .order-first { order: -1; } }
@if use(order-last) { .order-last { order: 9; } }
@include mq(xs) {
	@include cols-css(xs);
}
@include mq(sm) { 
	@include cols-css(sm);
	@if use(order-sm-auto) { .order-sm-auto { order: 0; } }
	@if use(order-sm-first) { .order-sm-first { order: -1; }  }
	@if use(order-sm-last) { .order-sm-last { order: 9; } }
}
@include mq(md) { @include cols-css(md);
	@if use(order-md-auto) { .order-md-auto { order: 0; } }
	@if use(order-md-first) { .order-md-first { order: -1; } }
	@if use(order-md-last) { .order-md-last { order: 9; } }
}
@include mq(lg) { @include cols-css(lg);
	@if use(order-lg-auto) { .order-lg-auto { order: 0; }  }
	@if use(order-lg-first) { .order-lg-first { order: -1; } }
	@if use(order-lg-last) { .order-lg-last { order: 9; } }
}
@include mq(xl) { @include cols-css(xl); }
@include col-css();
@include mq(xs) { @include col-css(xs); }
@include mq(sm) { @include col-css(sm); }
@include mq(md) { @include col-css(md); }
@include mq(lg) { @include col-css(lg); }
@include mq(xl) { @include col-css(xl); }

@include mq(xxl) {
	.col-xxl-2 {
		flex: 0 0 16.6666%;
		max-width: 16.6666%;
	}
}

.grid,
.grid-gallery {
	display: flex;
	flex-wrap: wrap;

	.grid-item {
		transform: translate3d(0,0,0);
	}

	&,
	&.gutter-md {
		width: calc( 100% + 2 * var(--rio-gutter-md) );
		margin: calc(-1 * var(--rio-gutter-md));

		.grid-item {
			padding: var(--rio-gutter-md);
		}
	}
	&.gutter-sm {
		width: calc( 100% + 2 * var(--rio-gutter-sm) );
		margin: calc(-1 * var(--rio-gutter-sm));

		.grid-item {
			padding: var(--rio-gutter-sm);
		}
	}
	&.gutter-lg {
		width: calc( 100% + 2 * var(--rio-gutter-lg) );
		margin: calc(-1 * var(--rio-gutter-lg));

		.grid-item {
			padding: var(--rio-gutter-lg);
		}
	}
	&.gutter-xs {
		width: calc(100% + 2px);
		margin: -1px;
		.grid-item {
			padding: 1px;
		}
	}
	&.gutter-no {
		width: 100%;
		margin: 0;
		.grid-item {
			padding: 0;
		}
	}
}
.creative-grid {
	.banner,
	&.banner,
	.product-category,
	.product-category > a,
	figure,
	figure img,
	.banner-img img,
	.owl-stage-outer,
	.owl-stage,
	.owl-item { 
		height: 100%; 
	}

	.product-cateogry .d-lazyload,
	.banner-img .d-lazyload {
		height: 100% !important;
		padding-top: 0 !important;
	}

	img {
		object-fit: cover;
	}
}
.grid-float {
	display: block !important;
	.grid-item {
		float: #{$left};
	}
	&::after {
		content: "";
		display: block;
		clear: both;
	}

	+ * {
		clear: both;
	}
}

.creative-display-grid {
	display: grid;
	grid-template-columns: repeat(4, 25%);
	grid-auto-rows: 1fr;

	img {
		object-fit: cover;
		width: 100%;
	}

	& > * {
		padding-top: var(--rio-gutter-md);
		padding-bottom: var(--rio-gutter-md);
	}

	&.gutter-no > * {
		padding-top: 0;
		padding-bottom: 0;
	}
	&.gutter-xs > * {
		padding-top: 1px;
		padding-bottom: 1px;
	}
	&.gutter-sm > * {
		padding-top: var(--rio-gutter-sm);
		padding-bottom: var(--rio-gutter-sm);
	}
	&.gutter-lg > * {
		padding-top: var(--rio-gutter-lg);
		padding-bottom: var(--rio-gutter-lg);
	}

	&.grid-equal-height {
		grid-auto-rows: auto;
	}

	&.grid-layout-1 {
		> div:nth-child(7n + 1) {
			grid-row-end: span 2;
		}
	}
	&.grid-layout-2 {
		grid-template-columns: 25% 50% 25%;
	
		> div:nth-child(5n + 2) {
			grid-row-end: span 2;
		}
	}
	&.grid-layout-3 {
		grid-template-columns: 50% 25% 25%;
	
		> div:nth-child(5n + 1) {
			grid-row-end: span 2;
		}
	}
	&.grid-layout-4 {
		grid-template-columns: 25% 25% 50%;
	
		> div:nth-child(5n + 3) {
			grid-row-end: span 2;
		}
	}
	&.grid-layout-5 {
		grid-template-columns: 50% 25% 25%;
	
		> div:nth-child(4n + 1) {
			grid-row-end: span 2;
		}
		> div:nth-child(4n + 2) {
			grid-row-end: span 2;
		}
	}
	&.grid-layout-6 {
		grid-template-columns: 50% 25% 25%;
	
		> div:nth-child(4n + 1) {
			grid-row-end: span 2;
		}
		> div:nth-child(4n + 3) {
			grid-row-end: span 2;
		}
	}
	&.grid-layout-7 {
		grid-template-columns: 33.33% 33.33% 33.33%;
	
		> div:nth-child(4n + 1) {
			grid-column-end: span 2;
		}
	
		> div:nth-child(4n + 2) {
			grid-row-end: span 2;
		}
	}
	&.grid-layout-8 {
		grid-template-columns: 33.33% 33.33% 33.33%;
	
		> div:nth-child(4n + 1) {
			grid-row-end: span 2;
		}
		> div:nth-child(4n + 2) {
			grid-column-end: span 2;
		}
	}
	&.grid-layout-9 {
		> div:nth-child(10n + 1) {
			grid-row-end: span 3;
		}
	}
}

@include mq(md, max) {
	.creative-display-grid.creative-grid {
		grid-template-columns: 50% 50%;
	}

	.creative-display-grid {
		&.grid-layout-2 {
			> div:nth-child(5n + 2) {
				// grid-area: 2 / 1 / 3 / 3;
				grid-row-start: 2;
				grid-row-end: 3;
				grid-column-start: 1;
				grid-column-end: 3;
			}
		}

		&.grid-layout-3 {
			> div:nth-child(5n + 1) {
				grid-column-end: span 2;
			}
		}
	
		&.grid-layout-4 {
			> div:nth-child(5n) {
				grid-column-end: span 2;
			}
			> div:nth-child(5n+3) {
				grid-column-end: span 1;
			}
		}
	
		&.grid-layout-5 {
			>div:nth-child(4n+1) {
				grid-column-end: span 2;
			}
		}
	
		&.grid-layout-6 {
			>div:nth-child(4n+1) {
				grid-column-end: span 2;
			}
		}
	
		&.grid-layout-7 {
			>div:nth-child(4n+1) {
				grid-column-end: span 2;
			}
		}
	
		&.grid-layout-8 {
			>div:nth-child(4n+2) {
				grid-column-end: span 2;
				grid-row-start: 3;
				grid-column-start: 1;
			}
		}
	}
}

.editor-mode > [class*='grid-item'] {
	position: relative;
	overflow: hidden;
	border: 1px dashed rgba(34, 34, 34, .4);

	&:before {
		content: attr(data-grid-idx);
		position: absolute;
		left: 1rem;
		top: 1rem;
		color: #fff;
		font-size: 1.5rem;
		line-height: 1;
		z-index: 99;
	}

	&:after {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		border-#{$left}: 50px solid #27c;
		border-bottom: 50px solid transparent;
		z-index: 98;
	}
}