.grid {
	    display: grid;
	    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	    grid-gap: 1rem;
		margin-bottom: 10rem;
	}

	@media only screen and (min-width: 600px) {
	    .grid {
	        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	        grid-gap: 5rem;
	    }
	}

	.grid>a {
	    transition: background .2s ease;
	    padding: 1rem;
	    display: grid;
	    place-items: center;
	}

	.grid>a::before {
	    content: "";
	    display: block;
	    padding-bottom: 100%;
	    grid-area: 1 / 1 / 2 / 2;
	}

	.grid>a img {
	    transition: all .2s ease;
	    width: 100%;
	    grid-area: 1 / 1 / 2 / 2;

	    filter: gray;
	    /* IE6-9 */
	    -webkit-filter: grayscale(1);
	    /* Google Chrome, Safari 6+ & Opera 15+ */
	    filter: grayscale(1);
	    /* Microsoft Edge and Firefox 35+ */
	}

	.grid>a:hover {
	    background: black;
	}

	.grid>a:hover img {
	    -webkit-filter: invert(1);
	    filter: invert(1);
	}