/* css grid */

.grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 2rem;
}

.grid-inner {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 2rem;
}

.single-col-1 { grid-column: 1 / span 1; }
.single-col-2 { grid-column: 1 / span 1; }
.single-col-3 { grid-column: 1 / span 1; }

.span-2 { grid-column: 1 / span 1; }
.span-3 { grid-column: 1 / span 1; }
.sidebar { grid-column: 1 / span 1; }



@media (min-width: 840px) {
	.grid,
	.grid-inner { grid-template-columns: 1fr 1fr 1fr; }
	.single-col-1 { grid-column: 1 / span 1; }
	.single-col-2 { grid-column: 2 / span 1; }
	.single-col-3 { grid-column: 3 / span 1; }
	.span-2 { grid-column: 1 / span 2; }
	.span-3 { grid-column: 1 / span 3; }
	.sidebar { grid-column: 3 / span 1; }
}