/* JN Flex Grids */

.jnflex-grid {
  display: flex;
  width: 100%;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: flex-start;
  align-items: stretch;
}

.jnflex-grid.justify-content-end { justify-content: flex-end; }
.jnflex-grid.justify-content-center { justify-content: center; }
.jnflex-grid.justify-content-between { justify-content: space-between; }
.jnflex-grid.justify-content-around { justify-content: space-around; }
.jnflex-grid.justify-content-evenly { justify-content: space-evenly; }

.jnflex-grid.align-items-end { align-items: flex-end; }
.jnflex-grid.align-items-center { align-items: center; }
.jnflex-grid.align-items-stretch { align-items: stretch; }
.jnflex-grid.align-items-baseline { align-items: baseline; }

.jnflex-grid.direction-column { flex-direction: column; }
.jnflex-grid.direction-column-reverse { flex-direction: column-reverse; }
.jnflex-grid.direction-row-reverse { flex-direction: row-reverse; }

.jnflex-grid.no-side-margin { margin-left: 0; margin-right: 0; }

.jnflex-grid:not(.natural-sizing) > div {
  width: 100%;
  padding: 0 7.5px;
}
.jnflex-grid.small-1-per-row > div { width: 100%; }
.jnflex-grid.small-2-per-row > div { width: 50%; }
.jnflex-grid.small-3-per-row > div { width: 33%; }
.jnflex-grid.small-4-per-row > div { width: 25%; }
.jnflex-grid.small-5-per-row > div { width: 20%; }
.jnflex-grid.small-6-per-row > div { width: 16.666%; }
.jnflex-grid.small-7-per-row > div { width: 14.285%; }
.jnflex-grid.small-8-per-row > div { width: 12.5%; }
.jnflex-grid.small-9-per-row > div { width: 11.111%; }
.jnflex-grid.small-10-per-row > div { width: 10%; }

@media only screen and (min-width: 768px) {
  .jnflex-grid.large-1-per-row > div { width: 100%; }
  .jnflex-grid.large-2-per-row > div { width: 50%; }
  .jnflex-grid.large-3-per-row > div { width: 33%; }
  .jnflex-grid.large-4-per-row > div { width: 25%; }
  .jnflex-grid.large-5-per-row > div { width: 20%; }
  .jnflex-grid.large-6-per-row > div { width: 16.666%; }
  .jnflex-grid.large-7-per-row > div { width: 14.285%; }
  .jnflex-grid.large-8-per-row > div { width: 12.5%; }
  .jnflex-grid.large-9-per-row > div { width: 11.111%; }
  .jnflex-grid.large-10-per-row > div { width: 10%; }
}

.jnflex-grid.row-gap-0 { row-gap: 0rem; }
.jnflex-grid.row-gap-05 { row-gap: 0.5rem; }
.jnflex-grid.row-gap-1 { row-gap: 1rem; }
.jnflex-grid.row-gap-2 { row-gap: 2rem; }
.jnflex-grid.row-gap-3 { row-gap: 3rem; }

.jnflex-grid.col-gap-0 { column-gap: 0rem; }
.jnflex-grid.col-gap-05 { column-gap: 0.5rem; }
.jnflex-grid.col-gap-1 { column-gap: 1rem; }
.jnflex-grid.col-gap-2 { column-gap: 2rem; }
.jnflex-grid.col-gap-3 { column-gap: 3rem; }