.modern-grid {
	display: grid;

	&.flex-item {
		.grid-item {
			display: flex;
		}
	}

	.grid-item {
		min-width: 0;
		min-height: 0;
	}
}

.grid-width-2 {
	grid-column: span 2;
}

.grid-height-2 {
	grid-row: span 2;
}

@include media-breakpoint-down(sm) {
	.grid-width-2 {
		grid-column: span 1;
	}

	.grid-height-2 {
		grid-row: span 1;
	}
}

.m-grid {
	display: grid;
	grid-template-columns: var();

	> * {
		min-width: 0;
		min-height: 0;
	}
}
