CSS3 transform rotate images in flex layout with equal gutters - css

Question

I'm trying to rotate images by 30 degrees and maintain equal margins between.
The desired result looks like a brick layout:
I am starting out with a wrapped flex layout:
And adding a 30deg rotation:
But notice the unevenness.
Here's the CSS:
.img-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
.img-item {
flex: 0 0 50%;
#media #{$tablet} { & { flex: 0 0 25%; } }
#media #{$desktop} { & { flex: 0 0 20%; } }
/** padding for the gutters when using flexbox **/
padding: 5px 10px;
/** Transformation here
-webkit-transform: rotate(-30deg);
transform: rotate(-30deg);
/* chop off according to media queries - based off of 15 results*/
&:last-child {
display: none;
}
&:nth-last-child(-n+3) {
#media #{$tablet} { & { display: none; } }
#media #{$desktop} { & { display: initial; } }
}
.img {
object-fit: contain;
max-width: 100%;
}
}
}
HTML
<div class="img-container">
<div class="img-item">
<img class="img" src="http://www.logos.com/media/pbb/SampleCover.jpg" />
<img class="img" src="http://www.logos.com/media/pbb/SampleCover.jpg" />
<img class="img" src="http://www.logos.com/media/pbb/SampleCover.jpg" />
<img class="img" src="http://www.logos.com/media/pbb/SampleCover.jpg" />
<img class="img" src="http://www.logos.com/media/pbb/SampleCover.jpg" />
<img class="img" src="http://www.logos.com/media/pbb/SampleCover.jpg" />
<img class="img" src="http://www.logos.com/media/pbb/SampleCover.jpg" />
<img class="img" src="http://www.logos.com/media/pbb/SampleCover.jpg" />
<img class="img" src="http://www.logos.com/media/pbb/SampleCover.jpg" />
<img class="img" src="http://www.logos.com/media/pbb/SampleCover.jpg" />
<img class="img" src="http://www.logos.com/media/pbb/SampleCover.jpg" />
<img class="img" src="http://www.logos.com/media/pbb/SampleCover.jpg" />
<img class="img" src="http://www.logos.com/media/pbb/SampleCover.jpg" />
<img class="img" src="http://www.logos.com/media/pbb/SampleCover.jpg" />
<img class="img" src="http://www.logos.com/media/pbb/SampleCover.jpg" />
</div>
</div>=
I tried using CSS grids too, but had similar lack of interlocking brick layout and same vertical gutters and lack of horizontal gutters.