/* SASS - Jonny CSS Grid - M2 */
.jonny-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 2rem;
  align-items: unset !important;
}

.jonny-grid.no-gap {
  grid-gap: 0;
}

.jonny-grid.padding-all {
  padding: 2rem;
}

/* helper grid styles */
.content-inner > .jonny-grid:first-of-type {
  margin-top: 2rem;
}

.grid-margin-top {
  margin-top: 2rem;
}

.grid-margin-bottom {
  margin-bottom: 2rem;
}

.grid-margin-left {
  margin-left: 2rem;
}

.grid-margin-right {
  margin-right: 2rem;
}

.grid-inner-padding {
  padding: 2rem;
}

.grid-align-center {
  text-align: center;
}

.jonny-grid [class*=grid_] p {
  padding-top: 1rem;
  padding-bottom: 1rem;
  margin-bottom: 0;
}

.jonny-grid [class*=grid_] p:first-child {
  padding-top: 0rem;
}

.jonny-grid [class*=grid_] img {
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
}

.jonny-grid.no-object-cover [class*=grid_] img {
  -o-object-fit: contain;
  object-fit: contain;
}

.jonny-grid [class*=grid_] img:not(.aside-img) {
  max-width: 100%;
  width: 100%;
}

.jonny-grid [class*=grid_] img.aside-img,
.jonny-grid [class*=grid_] img.icon {
  display: inline;
}

.jonny-grid.grid-icons [class*=grid_] img.icon {
  width: auto;
}

.jonny-grid.align-items > div,
.jonny-grid.align-items > li {
  display: flex;
  align-items: center;
}

.jonny-grid.justify-content > div,
.jonny-grid.justify-content > li {
  display: flex;
  justify-content: center;
}

.jonny-grid.gap-2rem {
  gap: 2rem;
}

.jonny-grid.gap-3rem {
  gap: 3rem;
}

.jonny-grid.gap-4rem {
  gap: 4rem;
}

.jonny-grid.gap-5rem {
  gap: 5rem;
}

@media (min-width: 500px) {
  .jonny-grid.no-scale [class*=grid_] img {
    max-width: 250px !important;
    height: auto !important;
  }
}
@media (max-width: 48rem) {
  .jonny-grid [class*=grid_] img:not(.aside-img),
  .jonny-grid [class*=grid_] img:not(.icon) {
    width: 100%;
  }
}
/* main grid styles - mobile first */
.grid_1_m {
  grid-column: span 1;
}

.grid_2_m {
  grid-column: span 2;
}

.grid_3_m {
  grid-column: span 3;
}

.grid_4_m {
  grid-column: span 4;
}

.grid_5_m {
  grid-column: span 5;
}

.grid_6_m {
  grid-column: span 6;
}

.grid_7_m {
  grid-column: span 7;
}

.grid_8_m {
  grid-column: span 8;
}

.grid_9_m {
  grid-column: span 9;
}

.grid_10_m {
  grid-column: span 10;
}

.grid_11_m {
  grid-column: span 11;
}

.grid_12_m {
  grid-column: span 12;
}

.jonny-grid.fit-images [class*=grid_] img:not(.aside-img) {
  max-width: 100%;
  width: 100%; /* auto */
  height: 100%;
  min-height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.object-fit-cover-photo {
  width: 100%;
  min-height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.jonny-grid [class*=grid_] figure {
  max-width: unset;
  margin: 0 auto;
}

.jonny-grid [class*=grid_] figure img {
  -o-object-fit: contain;
     object-fit: contain;
}

/* responsive grid styles */
@media (min-width: 48rem) {
  .grid_1 {
    grid-column: span 1;
  }
  .grid_2 {
    grid-column: span 2;
  }
  .grid_3 {
    grid-column: span 3;
  }
  .grid_4 {
    grid-column: span 4;
  }
  .grid_5 {
    grid-column: span 5;
  }
  .grid_6 {
    grid-column: span 6;
  }
  .grid_7 {
    grid-column: span 7;
  }
  .grid_8 {
    grid-column: span 8;
  }
  .grid_9 {
    grid-column: span 9;
  }
  .grid_10 {
    grid-column: span 10;
  }
  .grid_11 {
    grid-column: span 11;
  }
  .grid_12 {
    grid-column: span 12;
  }
}
@media all and (-ms-high-contrast: none) {
  .jonny-grid {
    display: table;
  }
  .grid_3 {
    width: 24%;
    padding-left: 0.5%;
    padding-right: 0.5%;
    display: table-cell;
  }
}
/* tablet responsive */
@media (min-width: 48rem) and (max-width: 64rem) {
  .jonny-grid > .grid_1_m,
  .jonny-grid > .grid_2_m,
  .jonny-grid > .grid_3_m,
  .jonny-grid > .grid_4_m,
  .jonny-grid > .grid_5_m,
  .jonny-grid > .grid_6_m,
  .jonny-grid > .grid_7_m,
  .jonny-grid > .grid_8_m,
  .jonny-grid > .grid_9_m,
  .jonny-grid > .grid_10_m,
  .jonny-grid > .grid_12_m {
    grid-column: span 6;
  }
  .jonny-grid > div:last-of-type:nth-child(odd) {
    grid-column: span 12;
    display: block;
  }
  .jonny-grid.gallery-grid > div:last-of-type:nth-child(odd) {
    grid-column: span 6;
    display: block;
  }
  .jonny-grid > div:last-of-type:nth-child(odd) img:not(.aside-img) {
    width: 50%;
    margin: 0 auto;
  }
  .jonny-grid.full-width > div:last-of-type:nth-child(odd) img:not(.aside-img) {
    width: 100%;
    margin: 0 auto;
  }
  .jonny-grid.gallery-grid > div:last-of-type:nth-child(2n+1) img:not(.aside-img) {
    width: 100%;
    margin: 0 auto;
  }
}
/* mobile phone responsive */
@media (max-width: 48rem) {
  .jonny-grid [class*=grid_] h2,
  .jonny-grid [class*=grid_] h3 {
    text-align: center;
  }
  .jonny-grid [class*=grid_] img.aside-img {
    display: block;
    max-width: 100%;
  }
}
@media (min-width: 35rem) and (max-width: 48rem) {
  .jonny-grid > .grid_1_m,
  .jonny-grid > .grid_2_m,
  .jonny-grid > .grid_3_m,
  .jonny-grid > .grid_4_m,
  .jonny-grid > .grid_5_m,
  .jonny-grid > .grid_6_m,
  .jonny-grid > .grid_7_m,
  .jonny-grid > .grid_8_m,
  .jonny-grid > .grid_9_m,
  .jonny-grid > .grid_10_m,
  .jonny-grid > .grid_12_m {
    grid-column: span 6;
  }
  .jonny-grid > div:last-of-type:nth-child(odd) {
    grid-column: span 12;
    display: block;
  }
  .jonny-grid > div:last-of-type:nth-child(odd) img:not(.aside-img) {
    width: 50%;
    margin: 0 auto;
  }
  .jonny-grid.full-width > div:last-of-type:nth-child(odd) img:not(.aside-img) {
    width: 100%;
    margin: 0 auto;
  }
}
@media (max-width: 35rem) {
  .jonny-grid {
    grid-template-columns: 1fr;
  }
  .grid_1_m,
  .grid_2_m,
  .grid_3_m,
  .grid_4_m,
  .grid_5_m,
  .grid_6_m,
  .grid_7_m,
  .grid_8_m,
  .grid_9_m,
  .grid_10_m,
  .grid_12_m {
    grid-column: span 6;
  }
  .jonny-grid.grid-icons .grid_1_m,
  .jonny-grid.grid-icons .grid_2_m,
  .jonny-grid.grid-icons .grid_3_m,
  .jonny-grid.grid-icons .grid_4_m,
  .jonny-grid.grid-icons .grid_5_m,
  .jonny-grid.grid-icons .grid_6_m,
  .jonny-grid.grid-icons .grid_7_m,
  .jonny-grid.grid-icons .grid_8_m,
  .jonny-grid.grid-icons .grid_9_m,
  .jonny-grid.grid-icons .grid_10_m,
  .jonny-grid.grid-icons .grid_12_m {
    grid-column: span 3;
  }
}/*# sourceMappingURL=jonny-css-grid.min.css.map */