html  {
	scroll-behavior: smooth;
}

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

.section {
	overflow: hidden;
	position: relative;
	/* z-index: 1; */
	/* padding: 1rem; */
}

.row {
	overflow: hidden;
	width: 100%;
	box-sizing: border-box;
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  /* padding: 1rem 0; */
}


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

@media all and (min-width:60em) {
	.row {
		grid-template-columns: repeat(3,1fr);
	}
}

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

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

@media all and (min-width:40em) {
	.column {
		padding: 1rem;
	}
}

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

.column.empty {
	display: none;
}

@media all and (min-width:80em) {
	.column.empty {
		display: inherit;
	}
	.column.span-2 {
		grid-column: span 2 / auto;
	}
}


@media all and (max-width:60em) {
	.column.span-2 {
		grid-column: span 1 / auto;
	}
}


@media all and (min-width:60em) {
	.column.span-3 {
		grid-column: span 3 / auto;
	}
}

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

.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 > img,
.column > a > img {
	width: 100%;

}