/* JN Flex Grids */

.jnflex-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: flex-start;
  align-items: flex-start;
  margin-left: -7.5px;
  margin-right: -7.5px;
}

.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.no-side-margin { margin-left: 0; margin-right: 0; }

.jnflex-grid:not(.natural-sizing) > div {
  width: calc(100% - 15px);
  margin: 0 7.5px;
}
.jnflex-grid.small-2-per-row > div { width: calc(50% - 15px); }
.jnflex-grid.small-3-per-row > div { width: calc(33% - 15px); }
.jnflex-grid.small-4-per-row > div { width: calc(25% - 15px); }
.jnflex-grid.small-5-per-row > div { width: calc(20% - 15px); }
.jnflex-grid.small-6-per-row > div { width: calc(16.666% - 15px); }

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

.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; }