/*
  Стили без суффикса для разрешения 1025-1366px;
  -m- Mobile (1 - 480px)
  -t- Tablet (481 - 1024px)
  -b- big screens (1367px+)
*/
:root {
  --cell-space: 30px;
}

.grid16, .grid16 .row {
  display: flex;
  flex-direction: row; /* Обычно по умолчанию */
  /*flex-wrap: wrap; !* По умолчанию nowrap *!*/
  /*flex-flow: ; /* Объединяет flex-direction и flex-wrap для краткости записи */
  justify-content: flex-start ;
  align-content: stretch;
  align-items: stretch;

  padding-left: calc(var(--cell-space) / 2);
  padding-right: calc(var(--cell-space) / 2);
}
.grid16 .row {
  width: 100%;
}
.grid16.inline, .grid16 .row.inline { display: inline-flex; }

.grid16.dir-row,
.grid16 .row.dir-row     { flex-direction: row; }
.grid16.dir-row-rev,
.grid16 .row.dir-row-rev { flex-direction: row-reverse; }
.grid16.dir-col,
.grid16 .row.dir-col     { flex-direction: column; }
.grid16.dir-col-rev,
.grid16 .row.dir-col-rev { flex-direction: column-reverse; }

.grid16.fw-wrap,
.grid16 .row.fw-wrap { flex-wrap: wrap; }
.grid16.fw-no-wrap,
.grid16 .row.fw-no-wrap { flex-wrap: nowrap; }
.grid16.fw-wrap-rev,
.grid16 .row.fw-wrap-rev { flex-wrap: wrap-reverse; } /* Слеющая строка элементов над предыдущей располагается */

.grid16.jc-start,
.grid16 .row.jc-start { justify-content: flex-start; }
.grid16.jc-center,
.grid16 .row.jc-center{ justify-content: center; }
.grid16.jc-end,
.grid16 .row.jc-end { justify-content: flex-end; }
.grid16.jc-between,
.grid16 .row.jc-between { justify-content: space-between; }
.grid16.jc-around,
.grid16 .row.jc-around { justify-content: space-around; }

.grid16 .col-1,
.grid16 .col-2,
.grid16 .col-3,
.grid16 .col-4,
.grid16 .col-5,
.grid16 .col-6,
.grid16 .col-7,
.grid16 .col-8,
.grid16 .col-9,
.grid16 .col-10,
.grid16 .col-11,
.grid16 .col-12,
.grid16 .col-13,
.grid16 .col-14,
.grid16 .col-15,
.grid16 .col-16 {
  order: 0; /* По умолчанию */
  flex-grow: 0; /* по умолчанию */ /* Влияет на растягивание */
  flex-shrink: 1; /* по умолчанию */ /* Влияет на сжатие */
  flex-basis: auto; /* по умолчанию */ /* базовая ширина */

  margin-left: calc(var(--cell-space) / 2); margin-right: calc(var(--cell-space) / 2);
}

/* Без отступов */
/*.grid16 .col-1  { width: 6.25%; }
.grid16 .col-2  { width: 12.5%; }
.grid16 .col-3  { width: 18.75%; }
.grid16 .col-4  { width: 25%; }
.grid16 .col-5  { width: 31.25%; }
.grid16 .col-6  { width: 37.5%; }
.grid16 .col-7  { width: 43.75%; }
.grid16 .col-8  { width: 50%; }
.grid16 .col-9  { width: 56.25%; }
.grid16 .col-10 { width: 62.5%; }
.grid16 .col-11 { width: 68.75%; }
.grid16 .col-12 { width: 75%; }
.grid16 .col-13 { width: 81.25%; }
.grid16 .col-14 { width: 87.5%; }
.grid16 .col-15 { width: 93.75%; }
.grid16 .col-16 { width: 100%; }

.grid16 .offset-0  { margin-left: 0%; }
.grid16 .offset-1  { margin-left: 6.25%; }
.grid16 .offset-2  { margin-left: 12.5%; }
.grid16 .offset-3  { margin-left: 18.75%; }
.grid16 .offset-4  { margin-left: 25%; }
.grid16 .offset-5  { margin-left: 31.25%; }
.grid16 .offset-6  { margin-left: 37.5%; }
.grid16 .offset-7  { margin-left: 43.75%; }
.grid16 .offset-8  { margin-left: 50%; }
.grid16 .offset-9  { margin-left: 56.25%; }
.grid16 .offset-10 { margin-left: 62.5%; }
.grid16 .offset-11 { margin-left: 68.75%; }
.grid16 .offset-12 { margin-left: 75%; }
.grid16 .offset-13 { margin-left: 81.25%; }
.grid16 .offset-14 { margin-left: 87.5%; }
.grid16 .offset-15 { margin-left: 93.75%; }
.grid16 .offset-16 { margin-left: 100%; }*/

.grid16 .col-1  { width: calc(6.25% - var(--cell-space)); }
.grid16 .col-2  { width: calc(12.5% - var(--cell-space)); }
.grid16 .col-3  { width: calc(18.75% - var(--cell-space)); }
.grid16 .col-4  { width: calc(25% - var(--cell-space)); }
.grid16 .col-5  { width: calc(31.25% - var(--cell-space)); }
.grid16 .col-6  { width: calc(37.5% - var(--cell-space)); }
.grid16 .col-7  { width: calc(43.75% - var(--cell-space)); }
.grid16 .col-8  { width: calc(50% - var(--cell-space)); }
.grid16 .col-9  { width: calc(56.25% - var(--cell-space)); }
.grid16 .col-10 { width: calc(62.5% - var(--cell-space)); }
.grid16 .col-11 { width: calc(68.75% - var(--cell-space)); }
.grid16 .col-12 { width: calc(75% - var(--cell-space)); }
.grid16 .col-13 { width: calc(81.25% - var(--cell-space)); }
.grid16 .col-14 { width: calc(87.5% - var(--cell-space)); }
.grid16 .col-15 { width: calc(93.75% - var(--cell-space)); }
.grid16 .col-16 { width: calc(100% - var(--cell-space)); }

.grid16 .offset-0  { margin-left: calc(0% + var(--cell-space)/2); }
.grid16 .offset-1  { margin-left: calc(6.25% + var(--cell-space)/2); }
.grid16 .offset-2  { margin-left: calc(12.5% + var(--cell-space)/2); }
.grid16 .offset-3  { margin-left: calc(18.75% + var(--cell-space)/2); }
.grid16 .offset-4  { margin-left: calc(25% + var(--cell-space)/2); }
.grid16 .offset-5  { margin-left: calc(31.25% + var(--cell-space)/2); }
.grid16 .offset-6  { margin-left: calc(37.5% + var(--cell-space)/2); }
.grid16 .offset-7  { margin-left: calc(43.75% + var(--cell-space)/2); }
.grid16 .offset-8  { margin-left: calc(50% + var(--cell-space)/2); }
.grid16 .offset-9  { margin-left: calc(56.25% + var(--cell-space)/2); }
.grid16 .offset-10 { margin-left: calc(62.5% + var(--cell-space)/2); }
.grid16 .offset-11 { margin-left: calc(68.75% + var(--cell-space)/2); }
.grid16 .offset-12 { margin-left: calc(75% + var(--cell-space)/2); }
.grid16 .offset-13 { margin-left: calc(81.25% + var(--cell-space)/2); }
.grid16 .offset-14 { margin-left: calc(87.5% + var(--cell-space)/2); }
.grid16 .offset-15 { margin-left: calc(93.75% + var(--cell-space)/2); }
.grid16 .offset-16 { margin-left: 100%; }

/* -m- Mobile */
@media all and (min-width: 1px) and (max-width: 480px) {
  .grid16 {
    padding-left: calc(var(--cell-space) /3/ 2);
    padding-right: calc(var(--cell-space) /3/ 2);
  }
  .grid16 .col-m-1,
  .grid16 .col-m-2,
  .grid16 .col-m-3,
  .grid16 .col-m-4,
  .grid16 .col-m-5,
  .grid16 .col-m-6,
  .grid16 .col-m-7,
  .grid16 .col-m-8,
  .grid16 .col-m-9,
  .grid16 .col-m-10,
  .grid16 .col-m-11,
  .grid16 .col-m-12,
  .grid16 .col-m-13,
  .grid16 .col-m-14,
  .grid16 .col-m-15,
  .grid16 .col-m-16 {
    margin-left: calc(var(--cell-space)/3/2); margin-right: calc(var(--cell-space)/3/2);
  }
  .grid16 .col-m-1  { width: calc(6.25% - var(--cell-space)/3); }
  .grid16 .col-m-2  { width: calc(12.5% - var(--cell-space)/3); }
  .grid16 .col-m-3  { width: calc(18.75% - var(--cell-space)/3); }
  .grid16 .col-m-4  { width: calc(25% - var(--cell-space)/3); }
  .grid16 .col-m-5  { width: calc(31.25% - var(--cell-space)/3); }
  .grid16 .col-m-6  { width: calc(37.5% - var(--cell-space)/3); }
  .grid16 .col-m-7  { width: calc(43.75% - var(--cell-space)/3); }
  .grid16 .col-m-8  { width: calc(50% - var(--cell-space)/3); }
  .grid16 .col-m-9  { width: calc(56.25% - var(--cell-space)/3); }
  .grid16 .col-m-10  { width: calc(62.5% - var(--cell-space)/3); }
  .grid16 .col-m-11  { width: calc(68.75% - var(--cell-space)/3); }
  .grid16 .col-m-12  { width: calc(75% - var(--cell-space)/3); }
  .grid16 .col-m-13  { width: calc(81.25% - var(--cell-space)/3); }
  .grid16 .col-m-14  { width: calc(87.5% - var(--cell-space)/3); }
  .grid16 .col-m-15  { width: calc(93.75% - var(--cell-space)/3); }
  .grid16 .col-m-16  { width: calc(100% - var(--cell-space)/3); }

  .grid16 .offset-m-0  { margin-left: calc(0% + var(--cell-space)/3/2); }
  .grid16 .offset-m-1  { margin-left: calc(6.25% + var(--cell-space)/3/2); }
  .grid16 .offset-m-2  { margin-left: calc(12.5% + var(--cell-space)/3/2); }
  .grid16 .offset-m-3  { margin-left: calc(18.75% + var(--cell-space)/3/2); }
  .grid16 .offset-m-4  { margin-left: calc(25% + var(--cell-space)/3/2); }
  .grid16 .offset-m-5  { margin-left: calc(31.25% + var(--cell-space)/3/2); }
  .grid16 .offset-m-6  { margin-left: calc(37.5% + var(--cell-space)/3/2); }
  .grid16 .offset-m-7  { margin-left: calc(43.75% + var(--cell-space)/3/2); }
  .grid16 .offset-m-8  { margin-left: calc(50% + var(--cell-space)/3/2); }
  .grid16 .offset-m-9  { margin-left: calc(56.25% + var(--cell-space)/3/2); }
  .grid16 .offset-m-10  { margin-left: calc(62.5% + var(--cell-space)/3/2); }
  .grid16 .offset-m-11  { margin-left: calc(68.75% + var(--cell-space)/3/2); }
  .grid16 .offset-m-12  { margin-left: calc(75% + var(--cell-space)/3/2); }
  .grid16 .offset-m-13  { margin-left: calc(81.25% + var(--cell-space)/3/2); }
  .grid16 .offset-m-14  { margin-left: calc(87.5% + var(--cell-space)/3/2); }
  .grid16 .offset-m-15  { margin-left: calc(93.75% + var(--cell-space)/3/2); }
  .grid16 .offset-m-16  { margin-left: calc(100% + var(--cell-space)/3/2); }
}

/* -t- Tablet */
@media all and (min-width: 481px) and (max-width: 1024px) {
  .grid16 {
    padding-left: calc(var(--cell-space) /2/ 2);
    padding-right: calc(var(--cell-space) /2/ 2);
  }
  .grid16 .col-t-1,
  .grid16 .col-t-2,
  .grid16 .col-t-3,
  .grid16 .col-t-4,
  .grid16 .col-t-5,
  .grid16 .col-t-6,
  .grid16 .col-t-7,
  .grid16 .col-t-8,
  .grid16 .col-t-9,
  .grid16 .col-t-10,
  .grid16 .col-t-11,
  .grid16 .col-t-12,
  .grid16 .col-t-13,
  .grid16 .col-t-14,
  .grid16 .col-t-15,
  .grid16 .col-t-16 {
    margin-left: calc(var(--cell-space)/2/2); margin-right: calc(var(--cell-space)/2/2);
  }
  .grid16 .col-t-1  { width: calc(6.25% - var(--cell-space)/2); }
  .grid16 .col-t-2  { width: calc(12.5% - var(--cell-space)/2); }
  .grid16 .col-t-3  { width: calc(18.75% - var(--cell-space)/2); }
  .grid16 .col-t-4  { width: calc(25% - var(--cell-space)/2); }
  .grid16 .col-t-5  { width: calc(31.25% - var(--cell-space)/2); }
  .grid16 .col-t-6  { width: calc(37.5% - var(--cell-space)/2); }
  .grid16 .col-t-7  { width: calc(43.75% - var(--cell-space)/2); }
  .grid16 .col-t-8  { width: calc(50% - var(--cell-space)/2); }
  .grid16 .col-t-9  { width: calc(56.25% - var(--cell-space)/2); }
  .grid16 .col-t-10  { width: calc(62.5% - var(--cell-space)/2); }
  .grid16 .col-t-11  { width: calc(68.75% - var(--cell-space)/2); }
  .grid16 .col-t-12  { width: calc(75% - var(--cell-space)/2); }
  .grid16 .col-t-13  { width: calc(81.25% - var(--cell-space)/2); }
  .grid16 .col-t-14  { width: calc(87.5% - var(--cell-space)/2); }
  .grid16 .col-t-15  { width: calc(93.75% - var(--cell-space)/2); }
  .grid16 .col-t-16  { width: calc(100% - var(--cell-space)/2); }

  .grid16 .offset-t-0  { margin-left: calc(0% + var(--cell-space)/2/2); }
  .grid16 .offset-t-1  { margin-left: calc(6.25% + var(--cell-space)/2/2); }
  .grid16 .offset-t-2  { margin-left: calc(12.5% + var(--cell-space)/2/2); }
  .grid16 .offset-t-3  { margin-left: calc(18.75% + var(--cell-space)/2/2); }
  .grid16 .offset-t-4  { margin-left: calc(25% + var(--cell-space)/2/2); }
  .grid16 .offset-t-5  { margin-left: calc(31.25% + var(--cell-space)/2/2); }
  .grid16 .offset-t-6  { margin-left: calc(37.5% + var(--cell-space)/2/2); }
  .grid16 .offset-t-7  { margin-left: calc(43.75% + var(--cell-space)/2/2); }
  .grid16 .offset-t-8  { margin-left: calc(50% + var(--cell-space)/2/2); }
  .grid16 .offset-t-9  { margin-left: calc(56.25% + var(--cell-space)/2/2); }
  .grid16 .offset-t-10  { margin-left: calc(62.5% + var(--cell-space)/2/2); }
  .grid16 .offset-t-11  { margin-left: calc(68.75% + var(--cell-space)/2/2); }
  .grid16 .offset-t-12  { margin-left: calc(75% + var(--cell-space)/2/2); }
  .grid16 .offset-t-13  { margin-left: calc(81.25% + var(--cell-space)/2/2); }
  .grid16 .offset-t-14  { margin-left: calc(87.5% + var(--cell-space)/2/2); }
  .grid16 .offset-t-15  { margin-left: calc(93.75% + var(--cell-space)/2/2); }
  .grid16 .offset-t-16  { margin-left: calc(100% + var(--cell-space)/2/2); }
}

/* -b- Big Screens */
@media all and (min-width: 1367px) {
  .grid16 .col-b-1,
  .grid16 .col-b-2,
  .grid16 .col-b-3,
  .grid16 .col-b-4,
  .grid16 .col-b-5,
  .grid16 .col-b-6,
  .grid16 .col-b-7,
  .grid16 .col-b-8,
  .grid16 .col-b-9,
  .grid16 .col-b-10,
  .grid16 .col-b-11,
  .grid16 .col-b-12,
  .grid16 .col-b-13,
  .grid16 .col-b-14,
  .grid16 .col-b-15,
  .grid16 .col-b-16 {
    margin-left: calc(var(--cell-space)/2); margin-right: calc(var(--cell-space)/2);
  }
  .grid16 .col-b-0  { width: calc(0% - var(--cell-space)); }
  .grid16 .col-b-1  { width: calc(6.25% - var(--cell-space)); }
  .grid16 .col-b-2  { width: calc(12.5% - var(--cell-space)); }
  .grid16 .col-b-3  { width: calc(18.75% - var(--cell-space)); }
  .grid16 .col-b-4  { width: calc(25% - var(--cell-space)); }
  .grid16 .col-b-5  { width: calc(31.25% - var(--cell-space)); }
  .grid16 .col-b-6  { width: calc(37.5% - var(--cell-space)); }
  .grid16 .col-b-7  { width: calc(43.75% - var(--cell-space)); }
  .grid16 .col-b-8  { width: calc(50% - var(--cell-space)); }
  .grid16 .col-b-9  { width: calc(56.25% - var(--cell-space)); }
  .grid16 .col-b-10  { width: calc(62.5% - var(--cell-space)); }
  .grid16 .col-b-11  { width: calc(68.75% - var(--cell-space)); }
  .grid16 .col-b-12  { width: calc(75% - var(--cell-space)); }
  .grid16 .col-b-13  { width: calc(81.25% - var(--cell-space)); }
  .grid16 .col-b-14  { width: calc(87.5% - var(--cell-space)); }
  .grid16 .col-b-15  { width: calc(93.75% - var(--cell-space)); }
  .grid16 .col-b-16  { width: calc(100% - var(--cell-space)); }

  .grid16 .offset-b-0  { margin-left: calc(0% + var(--cell-space)/2); }
  .grid16 .offset-b-1  { margin-left: calc(6.25% + var(--cell-space)/2); }
  .grid16 .offset-b-2  { margin-left: calc(12.5% + var(--cell-space)/2); }
  .grid16 .offset-b-3  { margin-left: calc(18.75% + var(--cell-space)/2); }
  .grid16 .offset-b-4  { margin-left: calc(25% + var(--cell-space)/2); }
  .grid16 .offset-b-5  { margin-left: calc(31.25% + var(--cell-space)/2); }
  .grid16 .offset-b-6  { margin-left: calc(37.5% + var(--cell-space)/2); }
  .grid16 .offset-b-7  { margin-left: calc(43.75% + var(--cell-space)/2); }
  .grid16 .offset-b-8  { margin-left: calc(50% + var(--cell-space)/2); }
  .grid16 .offset-b-9  { margin-left: calc(56.25% + var(--cell-space)/2); }
  .grid16 .offset-b-10  { margin-left: calc(62.5% + var(--cell-space)/2); }
  .grid16 .offset-b-11  { margin-left: calc(68.75% + var(--cell-space)/2); }
  .grid16 .offset-b-12  { margin-left: calc(75% + var(--cell-space)/2); }
  .grid16 .offset-b-13  { margin-left: calc(81.25% + var(--cell-space)/2); }
  .grid16 .offset-b-14  { margin-left: calc(87.5% + var(--cell-space)/2); }
  .grid16 .offset-b-15  { margin-left: calc(93.75% + var(--cell-space)/2); }
  .grid16 .offset-b-16  { margin-left: calc(100% + var(--cell-space)/2); }
}
/*

@media all  -- Для всех устройств
@media screen  -- Для устройств с экраном
@media print  -- Для принтеров и предварительног опросмотра перед печатью
@media speech  -- Для речевых синтезаторов

@media not screen  -- отрицание условия
@media screen and/щк print -- Условия должны выполниться
@media screen, print  -- Запятая для перечисления условий
@media (min-max-width)
@media (min-max-height)
@media (orientation: landscape) or (orientation: portrait)
@media (min-max-aspect-ratio: 16/9) or (min-max-aspect-ratio: 1336/768)
@media (min-max-resolution: 2dppx) or (min-max-aspect-ratio: 300dpi)

@import url(styles-xs.css) (max-width: 543px);

*/