/*
  Стили без суффикса для разрешения 1025-1366px;
  -m- Mobile (1 - 480px)
  -t- Tablet (481 - 1024px)
  -b- big screens (1367px+)
*/
:root {
  --cell-space: 30px;
}
.grid15, .grid15 .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);
}
.grid15 .row {
  width: 100%;
}
.grid15.inline, .grid15 .row.inline { display: inline-flex; }

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

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

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

.grid15 .col-1,
.grid15 .col-2,
.grid15 .col-3,
.grid15 .col-4,
.grid15 .col-5,
.grid15 .col-6,
.grid15 .col-7,
.grid15 .col-8,
.grid15 .col-9,
.grid15 .col-10,
.grid15 .col-11,
.grid15 .col-12,
.grid15 .col-13,
.grid15 .col-14,
.grid15 .col-15 {
  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);
}

/* Без отступов */
/*.grid15 .col-1  { width: 6.66666667%; }
.grid15 .col-2  { width: 13.33333333%; }
.grid15 .col-3  { width: 20%; }
.grid15 .col-4  { width: 26.66666667%; }
.grid15 .col-5  { width: 33.33333333%; }
.grid15 .col-6  { width: 40%; }
.grid15 .col-7  { width: 46.66666667%; }
.grid15 .col-8  { width: 53.33333333%; }
.grid15 .col-9  { width: 60%; }
.grid15 .col-10 { width: 66.66666667%; }
.grid15 .col-11 { width: 73.33333333%; }
.grid15 .col-12 { width: 80%; }
.grid15 .col-13 { width: 86.66666667%; }
.grid15 .col-14 { width: 93.33333333%; }
.grid15 .col-15 { width: 100%; }

.grid15 .offset-0  {  margin-left: 0%; }
.grid15 .offset-1  {  margin-left: 6.66666667%; }
.grid15 .offset-2  {  margin-left: 13.33333333%; }
.grid15 .offset-3  {  margin-left: 20%; }
.grid15 .offset-4  {  margin-left: 26.66666667%; }
.grid15 .offset-5  {  margin-left: 33.33333333%; }
.grid15 .offset-6  {  margin-left: 40%; }
.grid15 .offset-7  {  margin-left: 46.66666667%; }
.grid15 .offset-8  {  margin-left: 53.33333333%; }
.grid15 .offset-9  {  margin-left: 60%; }
.grid15 .offset-10 {  margin-left: 66.66666667%; }
.grid15 .offset-11 {  margin-left: 73.33333333%; }
.grid15 .offset-12 {  margin-left: 80%; }
.grid15 .offset-13 {  margin-left: 86.66666667%; }
.grid15 .offset-14 {  margin-left: 93.33333333%; }
.grid15 .offset-15 {  margin-left: 100%; }*/


.grid15 .col-1  { width: calc(6.66666667% - var(--cell-space)); }
.grid15 .col-2  { width: calc(13.33333333% - var(--cell-space)); }
.grid15 .col-3  { width: calc(20% - var(--cell-space)); }
.grid15 .col-4  { width: calc(26.66666667% - var(--cell-space)); }
.grid15 .col-5  { width: calc(33.33333333% - var(--cell-space)); }
.grid15 .col-6  { width: calc(40% - var(--cell-space)); }
.grid15 .col-7  { width: calc(46.66666667% - var(--cell-space)); }
.grid15 .col-8  { width: calc(53.33333333% - var(--cell-space)); }
.grid15 .col-9  { width: calc(60% - var(--cell-space)); }
.grid15 .col-10  { width: calc(66.66666667% - var(--cell-space)); }
.grid15 .col-11  { width: calc(73.33333333% - var(--cell-space)); }
.grid15 .col-12  { width: calc(80% - var(--cell-space)); }
.grid15 .col-13  { width: calc(86.66666667% - var(--cell-space)); }
.grid15 .col-14  { width: calc(93.33333333% - var(--cell-space)); }
.grid15 .col-15  { width: calc(100% - var(--cell-space)); }

.grid15 .offset-0  { margin-left: calc(0% + var(--cell-space)/2); }
.grid15 .offset-1  { margin-left: calc(6.66666667% + var(--cell-space)/2); }
.grid15 .offset-2  { margin-left: calc(13.33333333% + var(--cell-space)/2); }
.grid15 .offset-3  { margin-left: calc(20% + var(--cell-space)/2); }
.grid15 .offset-4  { margin-left: calc(26.66666667% + var(--cell-space)/2); }
.grid15 .offset-5  { margin-left: calc(33.33333333% + var(--cell-space)/2); }
.grid15 .offset-6  { margin-left: calc(40% + var(--cell-space)/2); }
.grid15 .offset-7  { margin-left: calc(46.66666667% + var(--cell-space)/2); }
.grid15 .offset-8  { margin-left: calc(53.33333333% + var(--cell-space)/2); }
.grid15 .offset-9  { margin-left: calc(60% + var(--cell-space)/2); }
.grid15 .offset-10  { margin-left: calc(66.66666667% + var(--cell-space)/2); }
.grid15 .offset-11  { margin-left: calc(73.33333333% + var(--cell-space)/2); }
.grid15 .offset-12  { margin-left: calc(80% + var(--cell-space)/2); }
.grid15 .offset-13  { margin-left: calc(86.66666667% + var(--cell-space)/2); }
.grid15 .offset-14  { margin-left: calc(93.33333333% + var(--cell-space)/2); }
.grid15 .offset-15  { margin-left: calc(100% + var(--cell-space)/2); }

/* -m- Mobile */
@media all and (min-width: 1px) and (max-width: 480px) {
  .grid15 {
    padding-left: calc(var(--cell-space) /3/ 2);
    padding-right: calc(var(--cell-space) /3/ 2);
  }
  .grid15 .col-m-1,
  .grid15 .col-m-2,
  .grid15 .col-m-3,
  .grid15 .col-m-4,
  .grid15 .col-m-5,
  .grid15 .col-m-6,
  .grid15 .col-m-7,
  .grid15 .col-m-8,
  .grid15 .col-m-9,
  .grid15 .col-m-10,
  .grid15 .col-m-11,
  .grid15 .col-m-12,
  .grid15 .col-m-13,
  .grid15 .col-m-14,
  .grid15 .col-m-15 {
    margin-left: calc(var(--cell-space)/3/2); margin-right: calc(var(--cell-space)/3/2);
  }
  .grid15 .col-m-1  { width: calc(6.66666667% - var(--cell-space)/3); }
  .grid15 .col-m-2  { width: calc(13.33333333% - var(--cell-space)/3); }
  .grid15 .col-m-3  { width: calc(20% - var(--cell-space)/3); }
  .grid15 .col-m-4  { width: calc(26.66666667% - var(--cell-space)/3); }
  .grid15 .col-m-5  { width: calc(33.33333333% - var(--cell-space)/3); }
  .grid15 .col-m-6  { width: calc(40% - var(--cell-space)/3); }
  .grid15 .col-m-7  { width: calc(46.66666667% - var(--cell-space)/3); }
  .grid15 .col-m-8  { width: calc(53.33333333% - var(--cell-space)/3); }
  .grid15 .col-m-9  { width: calc(60% - var(--cell-space)/3); }
  .grid15 .col-m-10  { width: calc(66.66666667% - var(--cell-space)/3); }
  .grid15 .col-m-11  { width: calc(73.33333333% - var(--cell-space)/3); }
  .grid15 .col-m-12  { width: calc(80% - var(--cell-space)/3); }
  .grid15 .col-m-13  { width: calc(86.66666667% - var(--cell-space)/3); }
  .grid15 .col-m-14  { width: calc(93.33333333% - var(--cell-space)/3); }
  .grid15 .col-m-15  { width: calc(100% - var(--cell-space)/3); }

  .grid15 .offset-m-0  { margin-left: calc(0% + var(--cell-space)/3/2); }
  .grid15 .offset-m-1  { margin-left: calc(6.66666667% + var(--cell-space)/3/2); }
  .grid15 .offset-m-2  { margin-left: calc(13.33333333% + var(--cell-space)/3/2); }
  .grid15 .offset-m-3  { margin-left: calc(20% + var(--cell-space)/3/2); }
  .grid15 .offset-m-4  { margin-left: calc(26.66666667% + var(--cell-space)/3/2); }
  .grid15 .offset-m-5  { margin-left: calc(33.33333333% + var(--cell-space)/3/2); }
  .grid15 .offset-m-6  { margin-left: calc(40% + var(--cell-space)/3/2); }
  .grid15 .offset-m-7  { margin-left: calc(46.66666667% + var(--cell-space)/3/2); }
  .grid15 .offset-m-8  { margin-left: calc(53.33333333% + var(--cell-space)/3/2); }
  .grid15 .offset-m-9  { margin-left: calc(60% + var(--cell-space)/3/2); }
  .grid15 .offset-m-10  { margin-left: calc(66.66666667% + var(--cell-space)/3/2); }
  .grid15 .offset-m-11  { margin-left: calc(73.33333333% + var(--cell-space)/3/2); }
  .grid15 .offset-m-12  { margin-left: calc(80% + var(--cell-space)/3/2); }
  .grid15 .offset-m-13  { margin-left: calc(86.66666667% + var(--cell-space)/3/2); }
  .grid15 .offset-m-14  { margin-left: calc(93.33333333% + var(--cell-space)/3/2); }
  .grid15 .offset-m-15  { margin-left: calc(100% + var(--cell-space)/3/2); }
}

/* -t- Tablet */
@media all and (min-width: 481px) and (max-width: 1024px) {
  .grid15 {
    padding-left: calc(var(--cell-space) /2/ 2);
    padding-right: calc(var(--cell-space) /2/ 2);
  }
  .grid15 .col-t-1,
  .grid15 .col-t-2,
  .grid15 .col-t-3,
  .grid15 .col-t-4,
  .grid15 .col-t-5,
  .grid15 .col-t-6,
  .grid15 .col-t-7,
  .grid15 .col-t-8,
  .grid15 .col-t-9,
  .grid15 .col-t-10,
  .grid15 .col-t-11,
  .grid15 .col-t-12,
  .grid15 .col-t-13,
  .grid15 .col-t-14,
  .grid15 .col-t-15 {
    margin-left: calc(var(--cell-space)/2/2); margin-right: calc(var(--cell-space)/2/2);
  }
  .grid15 .col-t-1  { width: calc(6.66666667% - var(--cell-space)/2); }
  .grid15 .col-t-2  { width: calc(13.33333333% - var(--cell-space)/2); }
  .grid15 .col-t-3  { width: calc(20% - var(--cell-space)/2); }
  .grid15 .col-t-4  { width: calc(26.66666667% - var(--cell-space)/2); }
  .grid15 .col-t-5  { width: calc(33.33333333% - var(--cell-space)/2); }
  .grid15 .col-t-6  { width: calc(40% - var(--cell-space)/2); }
  .grid15 .col-t-7  { width: calc(46.66666667% - var(--cell-space)/2); }
  .grid15 .col-t-8  { width: calc(53.33333333% - var(--cell-space)/2); }
  .grid15 .col-t-9  { width: calc(60% - var(--cell-space)/2); }
  .grid15 .col-t-10  { width: calc(66.66666667% - var(--cell-space)/2); }
  .grid15 .col-t-11  { width: calc(73.33333333% - var(--cell-space)/2); }
  .grid15 .col-t-12  { width: calc(80% - var(--cell-space)/2); }
  .grid15 .col-t-13  { width: calc(86.66666667% - var(--cell-space)/2); }
  .grid15 .col-t-14  { width: calc(93.33333333% - var(--cell-space)/2); }
  .grid15 .col-t-15  { width: calc(100% - var(--cell-space)/2); }

  .grid15 .offset-t-0  { margin-left: calc(0% + var(--cell-space)/2/2); }
  .grid15 .offset-t-1  { margin-left: calc(6.66666667% + var(--cell-space)/2/2); }
  .grid15 .offset-t-2  { margin-left: calc(13.33333333% + var(--cell-space)/2/2); }
  .grid15 .offset-t-3  { margin-left: calc(20% + var(--cell-space)/2/2); }
  .grid15 .offset-t-4  { margin-left: calc(26.66666667% + var(--cell-space)/2/2); }
  .grid15 .offset-t-5  { margin-left: calc(33.33333333% + var(--cell-space)/2/2); }
  .grid15 .offset-t-6  { margin-left: calc(40% + var(--cell-space)/2/2); }
  .grid15 .offset-t-7  { margin-left: calc(46.66666667% + var(--cell-space)/2/2); }
  .grid15 .offset-t-8  { margin-left: calc(53.33333333% + var(--cell-space)/2/2); }
  .grid15 .offset-t-9  { margin-left: calc(60% + var(--cell-space)/2/2); }
  .grid15 .offset-t-10  { margin-left: calc(66.66666667% + var(--cell-space)/2/2); }
  .grid15 .offset-t-11  { margin-left: calc(73.33333333% + var(--cell-space)/2/2); }
  .grid15 .offset-t-12  { margin-left: calc(80% + var(--cell-space)/2/2); }
  .grid15 .offset-t-13  { margin-left: calc(86.66666667% + var(--cell-space)/2/2); }
  .grid15 .offset-t-14  { margin-left: calc(93.33333333% + var(--cell-space)/2/2); }
  .grid15 .offset-t-15  { margin-left: calc(100% + var(--cell-space)/2/2); }
}

/* -b- Big Screens */
@media all and (min-width: 1367px) {
  .grid15 .col-b-1,
  .grid15 .col-b-2,
  .grid15 .col-b-3,
  .grid15 .col-b-4,
  .grid15 .col-b-5,
  .grid15 .col-b-6,
  .grid15 .col-b-7,
  .grid15 .col-b-8,
  .grid15 .col-b-9,
  .grid15 .col-b-10,
  .grid15 .col-b-11,
  .grid15 .col-b-12,
  .grid15 .col-b-13,
  .grid15 .col-b-14,
  .grid15 .col-b-15 {
    margin-left: calc(var(--cell-space)/2); margin-right: calc(var(--cell-space)/2);
  }
  .grid15 .col-b-1  { width: calc(6.66666667% - var(--cell-space)); }
  .grid15 .col-b-2  { width: calc(13.33333333% - var(--cell-space)); }
  .grid15 .col-b-3  { width: calc(20% - var(--cell-space)); }
  .grid15 .col-b-4  { width: calc(26.66666667% - var(--cell-space)); }
  .grid15 .col-b-5  { width: calc(33.33333333% - var(--cell-space)); }
  .grid15 .col-b-6  { width: calc(40% - var(--cell-space)); }
  .grid15 .col-b-7  { width: calc(46.66666667% - var(--cell-space)); }
  .grid15 .col-b-8  { width: calc(53.33333333% - var(--cell-space)); }
  .grid15 .col-b-9  { width: calc(60% - var(--cell-space)); }
  .grid15 .col-b-10  { width: calc(66.66666667% - var(--cell-space)); }
  .grid15 .col-b-11  { width: calc(73.33333333% - var(--cell-space)); }
  .grid15 .col-b-12  { width: calc(80% - var(--cell-space)); }
  .grid15 .col-b-13  { width: calc(86.66666667% - var(--cell-space)); }
  .grid15 .col-b-14  { width: calc(93.33333333% - var(--cell-space)); }
  .grid15 .col-b-15  { width: calc(100% - var(--cell-space)); }

  .grid15 .offset-b-0  { margin-left: calc(0% + var(--cell-space)/2); }
  .grid15 .offset-b-1  { margin-left: calc(6.66666667% + var(--cell-space)/2); }
  .grid15 .offset-b-2  { margin-left: calc(13.33333333% + var(--cell-space)/2); }
  .grid15 .offset-b-3  { margin-left: calc(20% + var(--cell-space)/2); }
  .grid15 .offset-b-4  { margin-left: calc(26.66666667% + var(--cell-space)/2); }
  .grid15 .offset-b-5  { margin-left: calc(33.33333333% + var(--cell-space)/2); }
  .grid15 .offset-b-6  { margin-left: calc(40% + var(--cell-space)/2); }
  .grid15 .offset-b-7  { margin-left: calc(46.66666667% + var(--cell-space)/2); }
  .grid15 .offset-b-8  { margin-left: calc(53.33333333% + var(--cell-space)/2); }
  .grid15 .offset-b-9  { margin-left: calc(60% + var(--cell-space)/2); }
  .grid15 .offset-b-10  { margin-left: calc(66.66666667% + var(--cell-space)/2); }
  .grid15 .offset-b-11  { margin-left: calc(73.33333333% + var(--cell-space)/2); }
  .grid15 .offset-b-12  { margin-left: calc(80% + var(--cell-space)/2); }
  .grid15 .offset-b-13  { margin-left: calc(86.66666667% + var(--cell-space)/2); }
  .grid15 .offset-b-14  { margin-left: calc(93.33333333% + var(--cell-space)/2); }
  .grid15 .offset-b-15  { 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);

*/