.image-grid {
  display: grid;
  width: 100%;
  padding-left: var(--gutter-width, 15);
  padding-right: var(--gutter-width, 15);
  /* grid-template-columns: repeat(var(--max-columns), 1fr); */
  grid-template-rows: auto;
  --grid-gutter: var(--gutter-width);
  --grid-gutter-buffer: calc(var(--grid-gutter) / 2);
  grid-column-gap: var(--grid-gutter);
  column-gap: var(--grid-gutter);
  grid-row-gap: calc(var(--grid-gutter) * 2);
  row-gap: calc(var(--grid-gutter) * 2);
}

.image-grid > * {
  align-self: start;
  justify-self: start;
}

.image-grid-image,
.image-grid-icon {
  display: grid;
  align-self: center;
  justify-self: center;
}

.image-grid-image {
  width: 100%;
  height: auto;
}

.image-grid-wrapper.small > .image-grid > .image-grid-image,
.image-grid-image.small {
  width: 50%;
  height: auto;
}

.image-grid-icon {
  width: 100%;
  text-align: center;
}

.image-grid-icon.xlarge {
  font-size: 4.0em;
}

.image-grid-icon.large {
  font-size: 3.0em;
}

.image-grid-icon.medium {
  font-size: 2.0em;
}

.image-grid-icon.small {
  font-size: 1.0em;
}

.image-grid-icon.red {
  color: var(--alert-red);
}

.image-grid:last-child {
  margin-bottom: 0px;
}

.image-grid .align-self-centered {
  align-self: center;
}

.image-grid .justify-self-centered {
  justify-self: center;
}

.double-wide > .image-grid,
.image-grid.double-wide {
  --grid-gutter: calc(var(--gutter-width) * 2);
}

.triple-wide > .image-grid,
.image-grid.triple-wide {
  --grid-gutter: calc(var(--gutter-width) * 3);
}

.image-grid-wrapper.one-column > .image-grid,
.image-grid.one-column {
  grid-template-columns: 1fr;
}

.image-grid-wrapper.two-columns > .image-grid,
.image-grid.two-columns {
  grid-template-columns:
    1fr
    1fr;
}

.image-grid-wrapper.three-columns > .image-grid,
.image-grid.three-columns {
  grid-template-columns:
    1fr
    1fr
    1fr;
}

.image-grid-wrapper.four-columns > .image-grid,
.image-grid.four-columns {
  grid-template-columns:
    1fr
    1fr
    1fr
    1fr;
}

.image-grid-wrapper.five-columns > .image-grid,
.image-grid.five-columns {
  grid-template-columns:
    1fr
    1fr
    1fr
    1fr
    1fr;
}

.image-grid-wrapper.six-columns > .image-grid,
.image-grid.six-columns {
  grid-template-columns:
    1fr
    1fr
    1fr
    1fr
    1fr
    1fr;
}

.image-grid-wrapper.seven-columns > .image-grid,
.image-grid.seven-columns {
  grid-template-columns:
    1fr
    1fr
    1fr
    1fr
    1fr
    1fr
    1fr;
}

.image-grid-wrapper.eight-columns > .image-grid,
.image-grid.eight-columns {
  grid-template-columns:
    1fr
    1fr
    1fr
    1fr
    1fr
    1fr
    1fr
    1fr;
}

.image-grid.centered {
  margin-top: var(--container-padding);
}

.image-grid.centered > * {
  align-self: start;
  justify-self: start;
}

.image-grid.centered:first-child {
  margin-top: 0px;
}

.image-grid-wrapper.grayscale > .image-grid > .image-grid-image,
.image-grid .image-grid-image.grayscale {
  -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
  filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */
}

.image-grid-wrapper.grayscale > .image-grid > .image-grid-image:hover,
.image-grid .image-grid-image.grayscale:hover {
  -webkit-filter: grayscale(0);
  filter: none;
}

.content-section > .image-grid {
  padding: var(--container-padding);
}