html, body{
	margin: 0;
	padding: 0
}

.section {
	overflow: hidden;
	position: relative;
}

.row {
	overflow: hidden;
	width: 100%;
	box-sizing: border-box;
	position: relative;
	display: grid;
	grid-template-columns: repeat(2,1fr);
	grid-column-gap: .75rem;
  grid-row-gap: 1.5rem;
}


@media all and (min-width: 30rem) {
	.row {
		grid-template-columns: repeat(3,1fr);
		padding-left: 1rem;
		padding-right: 1rem;
	}
}

@media all and (min-width: 50rem) {
	.row {
		grid-template-columns: repeat(6,1fr);
	}
}

@media all and (min-width: 80rem) {
	.row {
		grid-template-columns: repeat(12,1fr);
	}
}

.column {
	position: relative;
	padding: 0.75rem;
}

.column.span-2,
.column.span-3,
.column.span-4,
.column.span-5,
.column.span-6,
.column.span-7,
.column.span-8,
.column.span-9,
.column.span-10,
.column.span-11,
.column.span-12{
	grid-column: span 2 / auto;
}


@media all and (min-width: 30rem) {
	.column.span-4,
	.column.span-5,
	.column.span-6,
	.column.span-7,
	.column.span-8,
	.column.span-9,
	.column.span-10,
	.column.span-11,
	.column.span-12{
		grid-column: span 3 / auto;
	}
}

@media all and (min-width: 50rem) {

	.column.span-4 {
		grid-column: span 2 / auto;
	}

	.column.span-7,
	.column.span-8,
	.column.span-9{
		grid-column: span 4 / auto;
	}

	.column.span-10,
	.column.span-11,
	.column.span-12{
		grid-column: span 6 / auto;
	}
}

@media all and (min-width: 80rem) {

	.column.span-3 { grid-column: span 3 / auto; }

	.column.span-4 { grid-column: span 4 / auto; }

	.column.span-5 { grid-column: span 5 / auto; }

	.column.span-6 { grid-column: span 6 / auto; }

	.column.span-7 { grid-column: span 7 / auto; }

	.column.span-8 { grid-column: span 8 / auto; }

	.column.span-9 { grid-column: span 9 / auto; }

	.column.span-10 { grid-column: span 10 / auto; }

	.column.span-11 { grid-column: span 11 / auto; }

	.column.span-12 { grid-column: span 12 / auto; }
}


.column > *:first-child{
	margin-top: inherit;
}

.column.empty {
	display: none;
}

@media all and (min-width: 50rem) {
	.column.empty {
		display: inherit;
	}
}


.column > img,
.column > a > img,
.column > .gallery > img,
.column > .gallery > span > img {
	width: 100%;
	display: block;
}

@media all and (min-width: 80rem) {
	.in_2_columns {
		column-count: 2;
		column-gap: 1rem;
	}

	.in_3_columns {
		column-count: 3;
		column-gap: 1rem;
	}

	.in_2_columns p ,
	.in_3_columns p {
		break-inside: avoid-column;
	}
}

.flex {
	display: flex;
	justify-content: space-between;
}

.flex.fill > * {
	flex: 1;
	vertical-align: middle;
}