.modular--grid{}

.grid{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: -1rem;
}

.grid__ctn{
	width: 100%;
    max-width: var(--width-site);
    margin-left: auto;
    margin-right: auto;
    padding-right: var(--gutter);
    padding-left: var(--gutter);
}

.grid--portrait-grid{
	margin-left: -1rem;
}

@media (min-width: 735px) {
	.grid{
		margin-top: -2rem;
		margin-left: -2rem;
	}
}

.grid .modular__title{
	margin-bottom: 5rem;
}

.grid-item{
	position: relative;
	background-color: var(--color-bg);
	color: var(--color-fg);
	width: var(--item-width-portrait);
	margin-top: 1rem;
}
.grid--portrait-grid .grid-item{
	margin-left: 1rem;
	width: calc(var(--item-width-portrait) - 1rem);
}

@media (min-width: 735px) {
	.grid-item,
	.grid--portrait-grid .grid-item{
		margin-top: 2rem;
		margin-left: 2rem;
		width: calc(var(--item-width-landscape) - 2rem);
	}
}

.grid-item:not(:last-child){
	margin-bottom: 1rem;
}
@media (min-width: 735px) {
	.grid-item{
		margin-bottom: 0;
	}
}

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

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

.grid-item--h-align-center .grid-item__content{
	text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

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

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

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

.grid-item--v-align-end .grid-item{
    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: 0;
	max-width: 100%;
	padding: 0 0;
}

.grid-item h2,
.grid-item h3{
	margin-top: 2rem;
}

.grid-item .btn{
	margin-top: 1rem;
	margin-bottom: 0;
}