/*!
 * FLXBX GRID SYSTEM (12-COLUMNS)
 * the responsive CSS flexbox grid system by 1990KB
 *
 * @version 2.3.0
 *
 * @author Kevin Brand
 * @mail   kevin@1990kb.de
 * @url    https://1990kb.de
 *
 * Copyright (c) Kevin Brand
 *
 * @license GPLv3 or later
 *          https://www.gnu.org/licenses/gpl-3.0.html
 */
.grid {
  display: block;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
.grid.fullsize {
  width: 100%;
  max-width: none;
}
.grid::before, .grid::after {
  content: "";
  display: table;
  width: 100%;
  height: 0;
}
.grid.-o .col {
  outline: 1px solid rgba(255, 0, 255, 0.3);
  outline-offset: -1px;
}
.grid.-o .col:hover {
  outline-color: #f0f;
}

.row {
  --vertical-gutter-width: 30px;
  --horizontal-gutter-width: 30px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  box-sizing: border-box;
}

.row.gutter-v-60 { --vertical-gutter-width: 60px; }
.row.gutter-h-60 { --horizontal-gutter-width: 60px; }

.row.gutter-v-90 { --vertical-gutter-width: 90px; }
.row.gutter-h-90 { --horizontal-gutter-width: 90px; }

.row.gutter-v-120 { --vertical-gutter-width: 120px; }
.row.gutter-h-120 { --horizontal-gutter-width: 120px; }

.row .col {
  display: block;
  flex: 0 0 auto;
  box-sizing: border-box;
}
.row .col > *:not(.row):nth-child(1) {
  margin-top: 0;
}
.row .col > *:not(.row):nth-last-child(1) {
  margin-bottom: 0;
}
.row.top {
  align-items: flex-start;
}
.row.middle {
  align-items: center;
}
.row.bottom {
  align-items: flex-end;
}
.row.left {
  justify-content: flex-start;
}
.row.center {
  justify-content: center;
}
.row.right {
  justify-content: flex-end;
}

/*!
GRID BREAKPOINT "desktop"
*/
@media all and (min-width: 1281px) {
  .grid {
    width: 90%;
    max-width: 1350px;
  }

  .row {
    --vertical-gutter-width: 30px;
    --horizontal-gutter-width: 30px;
    margin-top: calc(var(--horizontal-gutter-width, 30px) * -1);
    margin-left: calc(var(--vertical-gutter-width, 30px) * -1);
  }
  .row > .col {
    margin-top: var(--horizontal-gutter-width, 30px);
    margin-left: var(--vertical-gutter-width, 30px);
  }
  .row > .col.desktop-1 {
    flex-basis: calc(8.3333333333% - var(--vertical-gutter-width, 30px));
    width: calc(8.3333333333% - var(--vertical-gutter-width, 30px));
    max-width: calc(8.3333333333% - var(--vertical-gutter-width, 30px));
  }
  .row > .col.offset-desktop-1 {
    margin-left: calc(8.3333333333% + var(--vertical-gutter-width, 30px));
  }
  .row > .col.desktop-2 {
    flex-basis: calc(16.6666666667% - var(--vertical-gutter-width, 30px));
    width: calc(16.6666666667% - var(--vertical-gutter-width, 30px));
    max-width: calc(16.6666666667% - var(--vertical-gutter-width, 30px));
  }
  .row > .col.offset-desktop-2 {
    margin-left: calc(16.6666666667% + var(--vertical-gutter-width, 30px));
  }
  .row > .col.desktop-3 {
    flex-basis: calc(25% - var(--vertical-gutter-width, 30px));
    width: calc(25% - var(--vertical-gutter-width, 30px));
    max-width: calc(25% - var(--vertical-gutter-width, 30px));
  }
  .row > .col.offset-desktop-3 {
    margin-left: calc(25% + var(--vertical-gutter-width, 30px));
  }
  .row > .col.desktop-4 {
    flex-basis: calc(33.3333333333% - var(--vertical-gutter-width, 30px));
    width: calc(33.3333333333% - var(--vertical-gutter-width, 30px));
    max-width: calc(33.3333333333% - var(--vertical-gutter-width, 30px));
  }
  .row > .col.offset-desktop-4 {
    margin-left: calc(33.3333333333% + var(--vertical-gutter-width, 30px));
  }
  .row > .col.desktop-5 {
    flex-basis: calc(41.6666666667% - var(--vertical-gutter-width, 30px));
    width: calc(41.6666666667% - var(--vertical-gutter-width, 30px));
    max-width: calc(41.6666666667% - var(--vertical-gutter-width, 30px));
  }
  .row > .col.offset-desktop-5 {
    margin-left: calc(41.6666666667% + var(--vertical-gutter-width, 30px));
  }
  .row > .col.desktop-6 {
    flex-basis: calc(50% - var(--vertical-gutter-width, 30px));
    width: calc(50% - var(--vertical-gutter-width, 30px));
    max-width: calc(50% - var(--vertical-gutter-width, 30px));
  }
  .row > .col.offset-desktop-6 {
    margin-left: calc(50% + var(--vertical-gutter-width, 30px));
  }
  .row > .col.desktop-7 {
    flex-basis: calc(58.3333333333% - var(--vertical-gutter-width, 30px));
    width: calc(58.3333333333% - var(--vertical-gutter-width, 30px));
    max-width: calc(58.3333333333% - var(--vertical-gutter-width, 30px));
  }
  .row > .col.offset-desktop-7 {
    margin-left: calc(58.3333333333% + var(--vertical-gutter-width, 30px));
  }
  .row > .col.desktop-8 {
    flex-basis: calc(66.6666666667% - var(--vertical-gutter-width, 30px));
    width: calc(66.6666666667% - var(--vertical-gutter-width, 30px));
    max-width: calc(66.6666666667% - var(--vertical-gutter-width, 30px));
  }
  .row > .col.offset-desktop-8 {
    margin-left: calc(66.6666666667% + var(--vertical-gutter-width, 30px));
  }
  .row > .col.desktop-9 {
    flex-basis: calc(75% - var(--vertical-gutter-width, 30px));
    width: calc(75% - var(--vertical-gutter-width, 30px));
    max-width: calc(75% - var(--vertical-gutter-width, 30px));
  }
  .row > .col.offset-desktop-9 {
    margin-left: calc(75% + var(--vertical-gutter-width, 30px));
  }
  .row > .col.desktop-10 {
    flex-basis: calc(83.3333333333% - var(--vertical-gutter-width, 30px));
    width: calc(83.3333333333% - var(--vertical-gutter-width, 30px));
    max-width: calc(83.3333333333% - var(--vertical-gutter-width, 30px));
  }
  .row > .col.offset-desktop-10 {
    margin-left: calc(83.3333333333% + var(--vertical-gutter-width, 30px));
  }
  .row > .col.desktop-11 {
    flex-basis: calc(91.6666666667% - var(--vertical-gutter-width, 30px));
    width: calc(91.6666666667% - var(--vertical-gutter-width, 30px));
    max-width: calc(91.6666666667% - var(--vertical-gutter-width, 30px));
  }
  .row > .col.offset-desktop-11 {
    margin-left: calc(91.6666666667% + var(--vertical-gutter-width, 30px));
  }
  .row > .col.desktop-12 {
    flex-basis: calc(100% - var(--vertical-gutter-width, 30px));
    width: calc(100% - var(--vertical-gutter-width, 30px));
    max-width: calc(100% - var(--vertical-gutter-width, 30px));
  }
  .row > .col.offset-desktop-12 {
    margin-left: calc(100% + var(--vertical-gutter-width, 30px));
  }

  .row + .row,
.row[class*=gutter-h-] + .row[class*=gutter-h-],
.row + .row[class*=gutter-h-],
.row[class*=gutter-h-] + .row {
    margin-top: 0;
  }

  .row.normal-gutter,
.row.gutter-v-normal {
    --vertical-gutter-width: 40px;
  }

  .row.normal-gutter,
.row.gutter-h-normal {
    --horizontal-gutter-width: 30px;
  }

  .row.small-gutter,
.row.gutter-v-small {
    --vertical-gutter-width: 5px;
  }

  .row.small-gutter,
.row.gutter-h-small {
    --horizontal-gutter-width: 5px;
  }

  .row.no-gutter,
.row.gutter-v-none {
    --vertical-gutter-width: 0px;
  }

  .row.no-gutter,
.row.gutter-h-none {
    --horizontal-gutter-width: 0px;
  }

  .hide-desktop,
.col.hide-desktop {
    display: none !important;
  }
}

/*!
GRID BREAKPOINT "tablet"
*/
@media all and (min-width: 900px) and (max-width: 1280px) {
  .grid {
    width: 90%;
    max-width: 900px;
  }

  .row {
    --vertical-gutter-width: 30px;
    --horizontal-gutter-width: 30px;
    margin-top: calc(var(--horizontal-gutter-width, 30px) * -1);
    margin-left: calc(var(--vertical-gutter-width, 30px) * -1);
  }
  .row > .col {
    margin-top: var(--horizontal-gutter-width, 30px);
    margin-left: var(--vertical-gutter-width, 30px);
  }
  .row > .col.tablet-1 {
    flex-basis: calc(8.3333333333% - var(--vertical-gutter-width, 30px));
    width: calc(8.3333333333% - var(--vertical-gutter-width, 30px));
    max-width: calc(8.3333333333% - var(--vertical-gutter-width, 30px));
  }
  .row > .col.offset-tablet-1 {
    margin-left: calc(8.3333333333% + var(--vertical-gutter-width, 30px));
  }
  .row > .col.tablet-2 {
    flex-basis: calc(16.6666666667% - var(--vertical-gutter-width, 30px));
    width: calc(16.6666666667% - var(--vertical-gutter-width, 30px));
    max-width: calc(16.6666666667% - var(--vertical-gutter-width, 30px));
  }
  .row > .col.offset-tablet-2 {
    margin-left: calc(16.6666666667% + var(--vertical-gutter-width, 30px));
  }
  .row > .col.tablet-3 {
    flex-basis: calc(25% - var(--vertical-gutter-width, 30px));
    width: calc(25% - var(--vertical-gutter-width, 30px));
    max-width: calc(25% - var(--vertical-gutter-width, 30px));
  }
  .row > .col.offset-tablet-3 {
    margin-left: calc(25% + var(--vertical-gutter-width, 30px));
  }
  .row > .col.tablet-4 {
    flex-basis: calc(33.3333333333% - var(--vertical-gutter-width, 30px));
    width: calc(33.3333333333% - var(--vertical-gutter-width, 30px));
    max-width: calc(33.3333333333% - var(--vertical-gutter-width, 30px));
  }
  .row > .col.offset-tablet-4 {
    margin-left: calc(33.3333333333% + var(--vertical-gutter-width, 30px));
  }
  .row > .col.tablet-5 {
    flex-basis: calc(41.6666666667% - var(--vertical-gutter-width, 30px));
    width: calc(41.6666666667% - var(--vertical-gutter-width, 30px));
    max-width: calc(41.6666666667% - var(--vertical-gutter-width, 30px));
  }
  .row > .col.offset-tablet-5 {
    margin-left: calc(41.6666666667% + var(--vertical-gutter-width, 30px));
  }
  .row > .col.tablet-6 {
    flex-basis: calc(50% - var(--vertical-gutter-width, 30px));
    width: calc(50% - var(--vertical-gutter-width, 30px));
    max-width: calc(50% - var(--vertical-gutter-width, 30px));
  }
  .row > .col.offset-tablet-6 {
    margin-left: calc(50% + var(--vertical-gutter-width, 30px));
  }
  .row > .col.tablet-7 {
    flex-basis: calc(58.3333333333% - var(--vertical-gutter-width, 30px));
    width: calc(58.3333333333% - var(--vertical-gutter-width, 30px));
    max-width: calc(58.3333333333% - var(--vertical-gutter-width, 30px));
  }
  .row > .col.offset-tablet-7 {
    margin-left: calc(58.3333333333% + var(--vertical-gutter-width, 30px));
  }
  .row > .col.tablet-8 {
    flex-basis: calc(66.6666666667% - var(--vertical-gutter-width, 30px));
    width: calc(66.6666666667% - var(--vertical-gutter-width, 30px));
    max-width: calc(66.6666666667% - var(--vertical-gutter-width, 30px));
  }
  .row > .col.offset-tablet-8 {
    margin-left: calc(66.6666666667% + var(--vertical-gutter-width, 30px));
  }
  .row > .col.tablet-9 {
    flex-basis: calc(75% - var(--vertical-gutter-width, 30px));
    width: calc(75% - var(--vertical-gutter-width, 30px));
    max-width: calc(75% - var(--vertical-gutter-width, 30px));
  }
  .row > .col.offset-tablet-9 {
    margin-left: calc(75% + var(--vertical-gutter-width, 30px));
  }
  .row > .col.tablet-10 {
    flex-basis: calc(83.3333333333% - var(--vertical-gutter-width, 30px));
    width: calc(83.3333333333% - var(--vertical-gutter-width, 30px));
    max-width: calc(83.3333333333% - var(--vertical-gutter-width, 30px));
  }
  .row > .col.offset-tablet-10 {
    margin-left: calc(83.3333333333% + var(--vertical-gutter-width, 30px));
  }
  .row > .col.tablet-11 {
    flex-basis: calc(91.6666666667% - var(--vertical-gutter-width, 30px));
    width: calc(91.6666666667% - var(--vertical-gutter-width, 30px));
    max-width: calc(91.6666666667% - var(--vertical-gutter-width, 30px));
  }
  .row > .col.offset-tablet-11 {
    margin-left: calc(91.6666666667% + var(--vertical-gutter-width, 30px));
  }
  .row > .col.tablet-12 {
    flex-basis: calc(100% - var(--vertical-gutter-width, 30px));
    width: calc(100% - var(--vertical-gutter-width, 30px));
    max-width: calc(100% - var(--vertical-gutter-width, 30px));
  }
  .row > .col.offset-tablet-12 {
    margin-left: calc(100% + var(--vertical-gutter-width, 30px));
  }

  .row + .row,
.row[class*=gutter-h-] + .row[class*=gutter-h-],
.row + .row[class*=gutter-h-],
.row[class*=gutter-h-] + .row {
    margin-top: 0;
  }

  .row.normal-gutter,
.row.gutter-v-normal {
    --vertical-gutter-width: 40px;
  }

  .row.normal-gutter,
.row.gutter-h-normal {
    --horizontal-gutter-width: 20px;
  }

  .row.small-gutter,
.row.gutter-v-small {
    --vertical-gutter-width: 5px;
  }

  .row.small-gutter,
.row.gutter-h-small {
    --horizontal-gutter-width: 5px;
  }

  .row.no-gutter,
.row.gutter-v-none {
    --vertical-gutter-width: 0px;
  }

  .row.no-gutter,
.row.gutter-h-none {
    --horizontal-gutter-width: 0px;
  }

  .hide-tablet,
.col.hide-tablet {
    display: none !important;
  }
}

/*!
GRID BREAKPOINT "phablet"
*/
@media all and (min-width: 600px) and (max-width: 899px) {
  .grid {
    width: 90%;
    max-width: 600px;
  }

  .row {
    --vertical-gutter-width: 20px;
    --horizontal-gutter-width: 20px;
    margin-top: calc(var(--horizontal-gutter-width, 30px) * -1);
    margin-left: calc(var(--vertical-gutter-width, 30px) * -1);
  }
  .row > .col {
    margin-top: var(--horizontal-gutter-width, 30px);
    margin-left: var(--vertical-gutter-width, 30px);
  }
  .row > .col.phablet-1 {
    flex-basis: calc(8.3333333333% - var(--vertical-gutter-width, 30px));
    width: calc(8.3333333333% - var(--vertical-gutter-width, 30px));
    max-width: calc(8.3333333333% - var(--vertical-gutter-width, 30px));
  }
  .row > .col.offset-phablet-1 {
    margin-left: calc(8.3333333333% + var(--vertical-gutter-width, 30px));
  }
  .row > .col.phablet-2 {
    flex-basis: calc(16.6666666667% - var(--vertical-gutter-width, 30px));
    width: calc(16.6666666667% - var(--vertical-gutter-width, 30px));
    max-width: calc(16.6666666667% - var(--vertical-gutter-width, 30px));
  }
  .row > .col.offset-phablet-2 {
    margin-left: calc(16.6666666667% + var(--vertical-gutter-width, 30px));
  }
  .row > .col.phablet-3 {
    flex-basis: calc(25% - var(--vertical-gutter-width, 30px));
    width: calc(25% - var(--vertical-gutter-width, 30px));
    max-width: calc(25% - var(--vertical-gutter-width, 30px));
  }
  .row > .col.offset-phablet-3 {
    margin-left: calc(25% + var(--vertical-gutter-width, 30px));
  }
  .row > .col.phablet-4 {
    flex-basis: calc(33.3333333333% - var(--vertical-gutter-width, 30px));
    width: calc(33.3333333333% - var(--vertical-gutter-width, 30px));
    max-width: calc(33.3333333333% - var(--vertical-gutter-width, 30px));
  }
  .row > .col.offset-phablet-4 {
    margin-left: calc(33.3333333333% + var(--vertical-gutter-width, 30px));
  }
  .row > .col.phablet-5 {
    flex-basis: calc(41.6666666667% - var(--vertical-gutter-width, 30px));
    width: calc(41.6666666667% - var(--vertical-gutter-width, 30px));
    max-width: calc(41.6666666667% - var(--vertical-gutter-width, 30px));
  }
  .row > .col.offset-phablet-5 {
    margin-left: calc(41.6666666667% + var(--vertical-gutter-width, 30px));
  }
  .row > .col.phablet-6 {
    flex-basis: calc(50% - var(--vertical-gutter-width, 30px));
    width: calc(50% - var(--vertical-gutter-width, 30px));
    max-width: calc(50% - var(--vertical-gutter-width, 30px));
  }
  .row > .col.offset-phablet-6 {
    margin-left: calc(50% + var(--vertical-gutter-width, 30px));
  }
  .row > .col.phablet-7 {
    flex-basis: calc(58.3333333333% - var(--vertical-gutter-width, 30px));
    width: calc(58.3333333333% - var(--vertical-gutter-width, 30px));
    max-width: calc(58.3333333333% - var(--vertical-gutter-width, 30px));
  }
  .row > .col.offset-phablet-7 {
    margin-left: calc(58.3333333333% + var(--vertical-gutter-width, 30px));
  }
  .row > .col.phablet-8 {
    flex-basis: calc(66.6666666667% - var(--vertical-gutter-width, 30px));
    width: calc(66.6666666667% - var(--vertical-gutter-width, 30px));
    max-width: calc(66.6666666667% - var(--vertical-gutter-width, 30px));
  }
  .row > .col.offset-phablet-8 {
    margin-left: calc(66.6666666667% + var(--vertical-gutter-width, 30px));
  }
  .row > .col.phablet-9 {
    flex-basis: calc(75% - var(--vertical-gutter-width, 30px));
    width: calc(75% - var(--vertical-gutter-width, 30px));
    max-width: calc(75% - var(--vertical-gutter-width, 30px));
  }
  .row > .col.offset-phablet-9 {
    margin-left: calc(75% + var(--vertical-gutter-width, 30px));
  }
  .row > .col.phablet-10 {
    flex-basis: calc(83.3333333333% - var(--vertical-gutter-width, 30px));
    width: calc(83.3333333333% - var(--vertical-gutter-width, 30px));
    max-width: calc(83.3333333333% - var(--vertical-gutter-width, 30px));
  }
  .row > .col.offset-phablet-10 {
    margin-left: calc(83.3333333333% + var(--vertical-gutter-width, 30px));
  }
  .row > .col.phablet-11 {
    flex-basis: calc(91.6666666667% - var(--vertical-gutter-width, 30px));
    width: calc(91.6666666667% - var(--vertical-gutter-width, 30px));
    max-width: calc(91.6666666667% - var(--vertical-gutter-width, 30px));
  }
  .row > .col.offset-phablet-11 {
    margin-left: calc(91.6666666667% + var(--vertical-gutter-width, 30px));
  }
  .row > .col.phablet-12 {
    flex-basis: calc(100% - var(--vertical-gutter-width, 30px));
    width: calc(100% - var(--vertical-gutter-width, 30px));
    max-width: calc(100% - var(--vertical-gutter-width, 30px));
  }
  .row > .col.offset-phablet-12 {
    margin-left: calc(100% + var(--vertical-gutter-width, 30px));
  }

  .row + .row,
.row[class*=gutter-h-] + .row[class*=gutter-h-],
.row + .row[class*=gutter-h-],
.row[class*=gutter-h-] + .row {
    margin-top: 0;
  }

  .row.normal-gutter,
.row.gutter-v-normal {
    --vertical-gutter-width: 20px;
  }

  .row.normal-gutter,
.row.gutter-h-normal {
    --horizontal-gutter-width: 20px;
  }

  .row.small-gutter,
.row.gutter-v-small {
    --vertical-gutter-width: 5px;
  }

  .row.small-gutter,
.row.gutter-h-small {
    --horizontal-gutter-width: 5px;
  }

  .row.no-gutter,
.row.gutter-v-none {
    --vertical-gutter-width: 0px;
  }

  .row.no-gutter,
.row.gutter-h-none {
    --horizontal-gutter-width: 0px;
  }

  .hide-phablet,
.col.hide-phablet {
    display: none !important;
  }
}

/*!
GRID BREAKPOINT "phone"
*/
@media all and (max-width: 599px) {
  .grid {
    width: 86%;
  }

  .row {
    --vertical-gutter-width: 20px;
    --horizontal-gutter-width: 20px;
    margin-top: calc(var(--horizontal-gutter-width, 30px) * -1);
    margin-left: calc(var(--vertical-gutter-width, 30px) * -1);
  }
  .row > .col {
    margin-top: var(--horizontal-gutter-width, 30px);
    margin-left: var(--vertical-gutter-width, 30px);
  }
  .row > .col.phone-1 {
    flex-basis: calc(8.3333333333% - var(--vertical-gutter-width, 30px));
    width: calc(8.3333333333% - var(--vertical-gutter-width, 30px));
    max-width: calc(8.3333333333% - var(--vertical-gutter-width, 30px));
  }
  .row > .col.offset-phone-1 {
    margin-left: calc(8.3333333333% + var(--vertical-gutter-width, 30px));
  }
  .row > .col.phone-2 {
    flex-basis: calc(16.6666666667% - var(--vertical-gutter-width, 30px));
    width: calc(16.6666666667% - var(--vertical-gutter-width, 30px));
    max-width: calc(16.6666666667% - var(--vertical-gutter-width, 30px));
  }
  .row > .col.offset-phone-2 {
    margin-left: calc(16.6666666667% + var(--vertical-gutter-width, 30px));
  }
  .row > .col.phone-3 {
    flex-basis: calc(25% - var(--vertical-gutter-width, 30px));
    width: calc(25% - var(--vertical-gutter-width, 30px));
    max-width: calc(25% - var(--vertical-gutter-width, 30px));
  }
  .row > .col.offset-phone-3 {
    margin-left: calc(25% + var(--vertical-gutter-width, 30px));
  }
  .row > .col.phone-4 {
    flex-basis: calc(33.3333333333% - var(--vertical-gutter-width, 30px));
    width: calc(33.3333333333% - var(--vertical-gutter-width, 30px));
    max-width: calc(33.3333333333% - var(--vertical-gutter-width, 30px));
  }
  .row > .col.offset-phone-4 {
    margin-left: calc(33.3333333333% + var(--vertical-gutter-width, 30px));
  }
  .row > .col.phone-5 {
    flex-basis: calc(41.6666666667% - var(--vertical-gutter-width, 30px));
    width: calc(41.6666666667% - var(--vertical-gutter-width, 30px));
    max-width: calc(41.6666666667% - var(--vertical-gutter-width, 30px));
  }
  .row > .col.offset-phone-5 {
    margin-left: calc(41.6666666667% + var(--vertical-gutter-width, 30px));
  }
  .row > .col.phone-6 {
    flex-basis: calc(50% - var(--vertical-gutter-width, 30px));
    width: calc(50% - var(--vertical-gutter-width, 30px));
    max-width: calc(50% - var(--vertical-gutter-width, 30px));
  }
  .row > .col.offset-phone-6 {
    margin-left: calc(50% + var(--vertical-gutter-width, 30px));
  }
  .row > .col.phone-7 {
    flex-basis: calc(58.3333333333% - var(--vertical-gutter-width, 30px));
    width: calc(58.3333333333% - var(--vertical-gutter-width, 30px));
    max-width: calc(58.3333333333% - var(--vertical-gutter-width, 30px));
  }
  .row > .col.offset-phone-7 {
    margin-left: calc(58.3333333333% + var(--vertical-gutter-width, 30px));
  }
  .row > .col.phone-8 {
    flex-basis: calc(66.6666666667% - var(--vertical-gutter-width, 30px));
    width: calc(66.6666666667% - var(--vertical-gutter-width, 30px));
    max-width: calc(66.6666666667% - var(--vertical-gutter-width, 30px));
  }
  .row > .col.offset-phone-8 {
    margin-left: calc(66.6666666667% + var(--vertical-gutter-width, 30px));
  }
  .row > .col.phone-9 {
    flex-basis: calc(75% - var(--vertical-gutter-width, 30px));
    width: calc(75% - var(--vertical-gutter-width, 30px));
    max-width: calc(75% - var(--vertical-gutter-width, 30px));
  }
  .row > .col.offset-phone-9 {
    margin-left: calc(75% + var(--vertical-gutter-width, 30px));
  }
  .row > .col.phone-10 {
    flex-basis: calc(83.3333333333% - var(--vertical-gutter-width, 30px));
    width: calc(83.3333333333% - var(--vertical-gutter-width, 30px));
    max-width: calc(83.3333333333% - var(--vertical-gutter-width, 30px));
  }
  .row > .col.offset-phone-10 {
    margin-left: calc(83.3333333333% + var(--vertical-gutter-width, 30px));
  }
  .row > .col.phone-11 {
    flex-basis: calc(91.6666666667% - var(--vertical-gutter-width, 30px));
    width: calc(91.6666666667% - var(--vertical-gutter-width, 30px));
    max-width: calc(91.6666666667% - var(--vertical-gutter-width, 30px));
  }
  .row > .col.offset-phone-11 {
    margin-left: calc(91.6666666667% + var(--vertical-gutter-width, 30px));
  }
  .row > .col.phone-12 {
    flex-basis: calc(100% - var(--vertical-gutter-width, 30px));
    width: calc(100% - var(--vertical-gutter-width, 30px));
    max-width: calc(100% - var(--vertical-gutter-width, 30px));
  }
  .row > .col.offset-phone-12 {
    margin-left: calc(100% + var(--vertical-gutter-width, 30px));
  }

  .row + .row,
.row[class*=gutter-h-] + .row[class*=gutter-h-],
.row + .row[class*=gutter-h-],
.row[class*=gutter-h-] + .row {
    margin-top: 0;
  }

  .row.normal-gutter,
.row.gutter-v-normal {
    --vertical-gutter-width: 20px;
  }

  .row.normal-gutter,
.row.gutter-h-normal {
    --horizontal-gutter-width: 20px;
  }

  .row.small-gutter,
.row.gutter-v-small {
    --vertical-gutter-width: 5px;
  }

  .row.small-gutter,
.row.gutter-h-small {
    --horizontal-gutter-width: 5px;
  }

  .row.no-gutter,
.row.gutter-v-none {
    --vertical-gutter-width: 0px;
  }

  .row.no-gutter,
.row.gutter-h-none {
    --horizontal-gutter-width: 0px;
  }

  .hide-phone,
.col.hide-phone {
    display: none !important;
  }
}