@media screen and (min-width: 37.5em) {/*  600px */

	.sponsors-grid {
		display: flex;
		flex-flow: row wrap;
		margin-left: -1rem;
		margin-right: -1rem;
	}
/*  The above CSS is also used in the grid to have the grid go edge to edge  */
	.sponsor {
		padding: 0.5rem 1rem;
		float: left;
		width: 50%
	}

}

@media screen and (min-width: 37.5em) and (max-width: 74.9375em ) {/*  600px 1199px */
	.sponsor:nth-child(2n+1) {
		clear: left;
	}
}

@media screen and (min-width: 75em) {/*  1200px */
	.sponsor {
		padding: 0.5rem 1rem;
		float: left;
		width: 25%
	}
	.sponsor:nth-child(4n+1) {
		clear: left;
	}
}

/* Grid code  */

@supports (display: grid) {
	.sponsors-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	}

	/* Undo some fallback CSS   */
	.sponsor {
		width: auto;
	}
}


/* vert centering and box decoration  */

.sponsors-grid .sponsor__img-wrap {
	width: 100%;
	border: 1px solid #ccc;
	position: relative;
	margin-bottom: 8px;

	transition: border-color 250ms ease-in-out;
}

.sponsors-grid a.sponsor:hover .sponsor__img-wrap {
	border-color: #777;
}

.sponsors-grid .sponsor__img-wrap:before {
	content: "";
	display: block;
	padding-top: 100%; 	/* initial ratio of 1:1*/
}

.sponsor__img-wrap__vert-center {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 1em;

	display: flex;
	align-items: center;
	justify-content: center;
}

.sponsors-grid .sponsor__img-wrap img {
	display: inline;
}