/**
 * Container-Center: 100%
 *
 * Full-viewport-width wrapper. No padding, no margin.
 * Content is centred horizontally via flexbox.
 */

.container-center-100 {
  width: 100%;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* .button__container is block-level (full-width), so flex centering on the
   parent can't shrink it. Center the button inside its own wrapper instead. */
.container-center-100 .button__container {
  display: flex;
  justify-content: center;
}

/* Images should fill the full container width — override the parent's
   align-items: center which would otherwise shrink-wrap the figure. */
.container-center-100 .image {
  align-self: stretch;
}