.components-flex {
  display: flex;
  gap: 1.4em;
  flex-direction: row;
	align-items: center; 
	justify-content: center;
}

.components-grid {
  display: grid;
  grid-column-gap: 1.4em;
  grid-template-columns: auto;
  grid-template-rows: auto;
	align-items: center; 
	justify-content: center;
}

.image-grid {
  display: grid;
  grid-template-rows: auto;
  display: grid;
  grid-gap: 1em;
  grid-template-rows: auto;
  grid-template-columns: repeat(
    auto-fit,
    minmax(calc(var(--page-width) / 12), 1fr)
  );
}

@media only screen and (min-width: 45em) {
  .components-grid {
    grid-template-columns: 3fr 9fr;
  }
}