.modular--grid{}

.grid{
	display: grid;
	grid-column-gap: 1rem;
	grid-row-gap: 1rem;
	grid-column-gap: var(--gutter);
	grid-row-gap: var(--gutter);
}

.grid[tcolumns="1"]{grid-template-columns: repeat(1, 1fr);}
.grid[tcolumns="2"]{grid-template-columns: repeat(2, 1fr);}
.grid[tcolumns="3"]{grid-template-columns: repeat(3, 1fr);}
.grid[tcolumns="4"]{grid-template-columns: repeat(4, 1fr);}
.grid[tcolumns="5"]{grid-template-columns: repeat(5, 1fr);}
.grid[tcolumns="6"]{grid-template-columns: repeat(6, 1fr);}
.grid[tcolumns="7"]{grid-template-columns: repeat(7, 1fr);}
.grid[tcolumns="8"]{grid-template-columns: repeat(8, 1fr);}
.grid[tcolumns="9"]{grid-template-columns: repeat(9, 1fr);}
.grid[tcolumns="10"]{grid-template-columns: repeat(10, 1fr);}
.grid[tcolumns="11"]{grid-template-columns: repeat(11, 1fr);}
.grid[tcolumns="12"]{grid-template-columns: repeat(12, 1fr);}

.grid__item[columns="1"]{grid-column: span 1;}
.grid__item[columns="2"]{grid-column: span 2;}
.grid__item[columns="3"]{grid-column: span 3;}
.grid__item[columns="4"]{grid-column: span 4;}
.grid__item[columns="5"]{grid-column: span 5;}
.grid__item[columns="6"]{grid-column: span 6;}
.grid__item[columns="7"]{grid-column: span 7;}
.grid__item[columns="8"]{grid-column: span 8;}
.grid__item[columns="9"]{grid-column: span 9;}
.grid__item[columns="10"]{grid-column: span 10;}
.grid__item[columns="11"]{grid-column: span 11;}
.grid__item[columns="12"]{grid-column: span 12;}

.grid__item[rows="1"]{grid-row: span 1;}
.grid__item[rows="2"]{grid-row: span 2;}
.grid__item[rows="3"]{grid-row: span 3;}
.grid__item[rows="4"]{grid-row: span 4;}
.grid__item[rows="5"]{grid-row: span 5;}
.grid__item[rows="6"]{grid-row: span 6;}
.grid__item[rows="7"]{grid-row: span 7;}
.grid__item[rows="8"]{grid-row: span 8;}
.grid__item[rows="9"]{grid-row: span 9;}
.grid__item[rows="10"]{grid-row: span 10;}
.grid__item[rows="11"]{grid-row: span 11;}
.grid__item[rows="12"]{grid-row: span 12;}

.grid__item[start="1"]{grid-column-start: 1;}
.grid__item[start="2"]{grid-column-start: 2;}
.grid__item[start="3"]{grid-column-start: 3;}
.grid__item[start="4"]{grid-column-start: 4;}
.grid__item[start="5"]{grid-column-start: 5;}
.grid__item[start="6"]{grid-column-start: 6;}
.grid__item[start="7"]{grid-column-start: 7;}
.grid__item[start="8"]{grid-column-start: 8;}
.grid__item[start="9"]{grid-column-start: 9;}
.grid__item[start="10"]{grid-column-start: 10;}
.grid__item[start="11"]{grid-column-start: 11;}
.grid__item[start="12"]{grid-column-start: 12;}

.grid__item{
	position: relative;
	padding: var(--padding);
	border-radius: 4px;
	border-radius: var(--radius-1);
	background-color: #fff;
	background-color: var(--bg-color);
	background-size: cover;
	color: #313131;
	color: var(--fg-color);
	border: var(--border);
}

@media (max-width: 735px) {
	.grid__item[columns]{grid-column: 1/-1;}
}

.grid__item *:first-child {margin-top: 0;}
.grid__item *:last-child {margin-bottom: 0;}

.grid .site,
.grid .full,
.grid .tight{
	width: auto;
	margin-left: 0;
    margin-right: 0;
}

.grid__item__content--h-align-left{
	text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.grid__item__content--h-align-center{
	text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.grid__item__content--h-align-right{
	text-align: right;
    display: flex;
    flex-direction: column;
   	align-items: flex-end;
}

.grid__item--v-align-start{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.grid__item--v-align-center{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.grid__item--v-align-end{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.grid__item h1,
.grid__item h2,
.grid__item h3,
.grid__item h4,
.grid__item h5,
.grid__item h6,
.grid__item p,
.grid__item img,
.grid__item video,
.grid__item iframe{
	margin-top: 1rem;
	margin-bottom: 1rem;
	max-width: 100%;
	padding: 0 0;
}