/**
 * Project gallery spacing
 * ---------------------------------------------------------------------------
 * Project bodies are hand-authored WYSIWYG content, so each image sits in
 * whatever element the editor happened to use - on Gordon House alone the
 * wrappers are <a> x52, <h6> x4 and <div> x1, nested as
 *
 *     IMG < A  < H6 < .col-centered.col-md-6
 *     IMG < A  < P  < .col-centered.col-md-6
 *     IMG < H6      < .col-centered.col-md-6
 *
 * Each of those contributes a different default margin (h6 19.5px, p the
 * theme paragraph margin, a nothing but ~20px of inline baseline whitespace,
 * and a direct child nothing at all - the rows that touch). None of those
 * numbers was ever chosen.
 *
 * This file takes spacing away from the content and gives it to the column,
 * so it is the same regardless of how any given page was authored.
 *
 * Target: 7px between images, horizontally and vertically.
 *
 * Horizontal maths - the columns carry padding: 0 15px, which puts 30px
 * between neighbouring images and 15px at the outer edge. Dropping the
 * column padding to 3.5px gives 7px between images; the 11.5px moves to the
 * row so the gallery's outer alignment does not shift.
 *
 *     outer edge   11.5 (row) + 3.5 (col) = 15px, unchanged
 *     between imgs  3.5 (col)  + 3.5 (col) = 7px
 */

/* 1. Gutters */

.single-project .wyswiwyg-no-slider {
	padding-left: 11.5px;
	padding-right: 11.5px;
}

.single-project .wyswiwyg-no-slider .col-centered {
	padding-left: 3.5px;
	padding-right: 3.5px;
	margin-bottom: 7px;
}

/* 2. Neutralise the authored wrappers.
   The flex item is whatever element wraps the image (h6, p, a or the img
   itself), so it has to stretch and lose its margin for the column's 7px
   to be the only spacing in play. */

.single-project .wyswiwyg-no-slider .col-centered > * {
	width: 100%;
	margin-top: 0;
	margin-bottom: 0;
}

.single-project .wyswiwyg-no-slider .col-centered a {
	display: block;
}

/* 3. display:block removes the inline baseline gap - the invisible ~20px
   that was masquerading as a margin. width:100% evens up images whose
   source files are undersized (e.g. Greg_Natale_Gordon_01.jpg is only
   500px wide); those still want re-uploading, this just stops them
   breaking the grid. */

.single-project .wyswiwyg-no-slider .col-centered img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
}