@nitive/whitepaper-react/commonjs/_components/tpl-grid/tpl-grid.post.css

React components automatically generated by whitepaper-bem

.tpl-grid {
	display: grid;
	width: 100%;
}
.tpl-grid_xs-columns_2 { grid-template-columns: repeat(2, 1fr); }
.tpl-grid_xs-columns_3 { grid-template-columns: repeat(3, 1fr); }
@media screen and (max-width: 719px) {
	.tpl-grid_xs-ratio_1-1-1 {
		flex-flow: row wrap;
		grid-template-columns: 1fr 1fr 1fr;
	}

		.tpl-grid_xs-ratio_1-1-1 .tpl-grid__fraction {
			padding: var(--col-gap-half);
			box-sizing: border-box;
		}
}
@media screen and (max-width: 719px) {
	.tpl-grid_xs-ratio_1-1 {
		grid-template-columns: 1fr 1fr;
	}

		.tpl-grid_xs-ratio_1-1 .tpl-grid__fraction {
			padding: var(--col-gap-half);
			box-sizing: border-box;
		}
}
@media screen and (min-width: 720px) {
		.tpl-grid_s-ratio_1-1-1-1-1 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
		.tpl-grid_s-ratio_1-1-1-1 { grid-template-columns: 1fr 1fr 1fr 1fr; }
		.tpl-grid_s-ratio_1-1-1 { grid-template-columns: 1fr 1fr 1fr; }
		.tpl-grid_s-ratio_1-1 { grid-template-columns: 1fr 1fr; }
		.tpl-grid_s-columns_5 { grid-template-columns: repeat(5, 1fr); }
		.tpl-grid_s-columns_6 { grid-template-columns: repeat(6, 1fr); }
		.tpl-grid_s-columns_8 { grid-template-columns: repeat(8, 1fr); }
}
@media screen and (min-width: 1024px) {
		.tpl-grid_m-ratio_1-1-1-1-1 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
		.tpl-grid_m-ratio_1-1-1-1 { grid-template-columns: 1fr 1fr 1fr 1fr; }
		.tpl-grid_m-ratio_1-1-1 { grid-template-columns: 1fr 1fr 1fr; }
		.tpl-grid_m-ratio_1-1 { grid-template-columns: 1fr 1fr; }
		.tpl-grid_m-columns_12 { grid-template-columns: repeat(12, 1fr); }
		.tpl-grid_m-columns_10 { grid-template-columns: repeat(10, 1fr); }
		.tpl-grid_m-columns_6 { grid-template-columns: repeat(6, 1fr); }
}
@media screen and (min-width: 1280px) {
		.tpl-grid_l-ratio_1-1-1-1-1 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
		.tpl-grid_l-ratio_1-1-1-1 { grid-template-columns: 1fr 1fr 1fr 1fr; }
		.tpl-grid_l-ratio_1-1-1 { grid-template-columns: 1fr 1fr 1fr; }
		.tpl-grid_l-ratio_1-1 { grid-template-columns: 1fr 1fr; }
		.tpl-grid_l-columns_12 { grid-template-columns: repeat(12, 1fr); }
		.tpl-grid_l-columns_10 { grid-template-columns: repeat(10, 1fr); }
		.tpl-grid_l-columns_6 { grid-template-columns: repeat(6, 1fr); }
}
@media screen and (min-width: 1440px) {
		.tpl-grid_xl-ratio_1-1-1-1-1 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
		.tpl-grid_xl-ratio_1-1-1-1 { grid-template-columns: 1fr 1fr 1fr 1fr; }
		.tpl-grid_xl-ratio_1-1-1 { grid-template-columns: 1fr 1fr 1fr; }
		.tpl-grid_xl-ratio_1-1 { grid-template-columns: 1fr 1fr; }
		.tpl-grid_xl-columns_12 { grid-template-columns: repeat(12, 1fr); }
		.tpl-grid_xl-columns_10 { grid-template-columns: repeat(10, 1fr); }
		.tpl-grid_xl-columns_6 { grid-template-columns: repeat(6, 1fr); }
}