/*====================================================================================
    Layout Fundimentals

  Basic layout styles. Any style in this file MUST be used in the vast majority of sites.
  If a style isn't universal, it belongs in an extra_css file.
====================================================================================*/


/*====================================================================================
    Split Container

  A simple two column layout with a hero image on the left and content on the right.
====================================================================================*/
.splitContainer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 1em 2em;
  margin: 2em 0em;
  grid-auto-flow: row;
}

@media (min-width: 1400px) {
  .splitContainer {
    gap: 1em 5em;
    margin: 5em 0em;
  }
}

.splitContainer>* {
  width: 100%;
  grid-column: auto;
}

.splitContainer h1 {
  margin: 0px 0px;
}

.splitContainer__content {
  grid-column: 1 / -1;
}

.splitContainer__hero img {
  width: 100%;
  max-height: 100%;
}

@media (min-width: 1200px) {
  .splitContainer__hero {
    grid-row: 1/ span 2;
  }

  .splitContainer__hero img {
    width: 100%;
    height: 100%;
  }

  .splitContainer__content {
    grid-row-start: 2;
    grid-column: auto;
  }
}

.splitContainer.-reversed {
  grid-auto-flow: dense;
}

@media (min-width: 1200px) {
  .splitContainer.-reversed .splitContainer__content {
    grid-column: 1;
  }
}

/*====================================================================================
    Even Flex Row

  A flex row that evenly distributes items
====================================================================================*/
.even-flex-row{
  display: flex;
  flex-flow: row wrap;
  justify-content: space-evenly;
  align-items: center;
  align-self: center;
  height: 100%;
  width: 100%;
}
   
.even-flex-row  * {
  object-fit: contain;
  margin: 0.5em 0.5em;
}