SCSSified WordPress gallery styles (based on Twenty Seventeen)

_gallery.scss

.gallery-item {
	display: inline-block;
	text-align: left;
	vertical-align: top;
	margin: 0 0 1.5em;
	padding: 0 1em 0 0;

	@media ( min-width: 30em ) {
		max-width: 25%;
	}

	@for $i from 1 through 9 {

		.gallery-columns-#{ $i } & {
			
			@media ( min-width: if( 4 >= $i, 30em, 48em ) ) {
				max-width: calc( 100% / #{ $i } );
			}
		}
	}

	a {
		&,
		&:hover,
		&:focus {
			box-shadow: none;
			background: none;
			display: inline-block;
			max-width: 100%;
		}

		&:hover,
		&:focus {

			img {
				-webkit-filter: opacity(60%);
				filter: opacity(60%);
			}
		}

		img {
			display: block;
			transition: -webkit-filter 0.2s ease-in;
			transition: filter 0.2s ease-in;
			transition: filter 0.2s ease-in, -webkit-filter 0.2s ease-in;
			-webkit-backface-visibility: hidden;
			backface-visibility: hidden;
		}
	}

	.gallery-caption {
		display: block;
		text-align: left;
		padding: 0 10px 0 0;
		margin-bottom: 0;
	}
}