/*--------------------------------------------------------------
## Grid
--------------------------------------------------------------*/
.grid-section {
	display: grid;
	grid-gap: 20px;
}

.grid-2 {
	grid-template-columns: repeat(2, 1fr);
	align-items: start;
}
.grid-3 {
	grid-template-columns: repeat(3, 1fr);
	align-items: start;
}
.grid-4 {
    grid-template-columns: repeat(4, 1fr);
    align-items: start;
}
.grid-5 {
    grid-template-columns: repeat(5, 1fr);
    align-items: start;
}
.grid-6 {
    grid-template-columns: repeat(6, 1fr);
    align-items: center;
}
.grid-section img {
        /* width: 100%; */
}

/* Grid layout, specific for Resources page */
.grid-row {
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas: "a" "b" "c" "d";
	align-self: stretch;
}
.grid-row img {
	grid-area: a;
    align-self: start;
	padding-top: 20px;
}
.grid-row h3 {
	grid-area: b;
    align-self: start;
	font-size: 14px;
}
.grid-row p {
	grid-area: c;
    align-self: start;
	margin: 0 0 1em;
}
.grid-row div {
	grid-area: d;
    align-self: start;
}

/* Responsive */
@media screen and (max-width: 800px) {
	.grid-2, .grid-4 {
		grid-template-columns: repeat(2, 1fr);
		align-items: start;
	}
	.grid-5 {
		grid-template-columns: repeat(3, 1fr);
		align-items: start;
	}
	.grid-6 {
		grid-template-columns: repeat(3, 1fr);
		align-items: center;
	}	
}

@media screen and (max-width: 600px) {
	.grid-2, .grid-3, .grid-4 {
		grid-template-columns: repeat(1, 1fr);
		align-items: start;
	}
	.grid-5 {
		grid-template-columns: repeat(2, 1fr);
		align-items: start;
	}
	.grid-6 {
		grid-template-columns: repeat(2, 1fr);
		align-items: center;
	}
}