/* --------------------------------------------------------------------------
   Сетка: «3 колонки» на этом сайте всегда выводились по 4 в ряд.

   В старом css/grid.css правка жила прямо в базовом правиле
   .intec-grid > .intec-grid-item-3, а адаптивные варианты
   (.intec-grid-item-800-2 и прочие) шли в том же файле НИЖЕ и перебивали
   его на узких экранах — при той же специфичности, за счёт порядка.

   Теперь сетка приезжает из css/bundle.min.css, и правило 25%, подключённое
   после бандла, побеждало адаптивные варианты на любой ширине. Поэтому ниже
   они повторены — с ТОЙ ЖЕ специфичностью (0,2,0), что и в бандле: снова
   решает порядок, как в старом grid.css.

   Специфичность НЕ повышать: сайтовые правки адаптивной сетки
   в local/templates/.default/css/custom.css (например, -800-2 с
   max-width: calc(50% - 8px) под gap) тоже (0,2,0) и подключаются позже —
   они должны оставаться сильнее этого файла. С (0,3,0) на 681–800px
   карточки не влезали по две в ряд.

   Брейкпоинты — все, что есть в бандле; колонки 1–4 плюс auto и
   «резиновый» вариант без числа. Значения те же, что в бандле.
   -------------------------------------------------------------------------- */

.intec-grid > .intec-grid-item-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
}

@media all and (max-width: 1200px) {
    .intec-grid > .intec-grid-item-1200 { flex-basis: 0; flex-grow: 1; max-width: 100%; }
    .intec-grid > .intec-grid-item-1200-auto { flex: 0 0 auto; width: auto; max-width: none; }
    .intec-grid > .intec-grid-item-1200-1 { flex: 0 0 100%; max-width: 100%; }
    .intec-grid > .intec-grid-item-1200-2 { flex: 0 0 50%; max-width: 50%; }
    .intec-grid > .intec-grid-item-1200-3 { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; }
    .intec-grid > .intec-grid-item-1200-4 { flex: 0 0 25%; max-width: 25%; }
}

@media all and (max-width: 1150px) {
    .intec-grid > .intec-grid-item-1150 { flex-basis: 0; flex-grow: 1; max-width: 100%; }
    .intec-grid > .intec-grid-item-1150-auto { flex: 0 0 auto; width: auto; max-width: none; }
    .intec-grid > .intec-grid-item-1150-1 { flex: 0 0 100%; max-width: 100%; }
    .intec-grid > .intec-grid-item-1150-2 { flex: 0 0 50%; max-width: 50%; }
    .intec-grid > .intec-grid-item-1150-3 { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; }
    .intec-grid > .intec-grid-item-1150-4 { flex: 0 0 25%; max-width: 25%; }
}

@media all and (max-width: 1100px) {
    .intec-grid > .intec-grid-item-1100 { flex-basis: 0; flex-grow: 1; max-width: 100%; }
    .intec-grid > .intec-grid-item-1100-auto { flex: 0 0 auto; width: auto; max-width: none; }
    .intec-grid > .intec-grid-item-1100-1 { flex: 0 0 100%; max-width: 100%; }
    .intec-grid > .intec-grid-item-1100-2 { flex: 0 0 50%; max-width: 50%; }
    .intec-grid > .intec-grid-item-1100-3 { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; }
    .intec-grid > .intec-grid-item-1100-4 { flex: 0 0 25%; max-width: 25%; }
}

@media all and (max-width: 1050px) {
    .intec-grid > .intec-grid-item-1050 { flex-basis: 0; flex-grow: 1; max-width: 100%; }
    .intec-grid > .intec-grid-item-1050-auto { flex: 0 0 auto; width: auto; max-width: none; }
    .intec-grid > .intec-grid-item-1050-1 { flex: 0 0 100%; max-width: 100%; }
    .intec-grid > .intec-grid-item-1050-2 { flex: 0 0 50%; max-width: 50%; }
    .intec-grid > .intec-grid-item-1050-3 { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; }
    .intec-grid > .intec-grid-item-1050-4 { flex: 0 0 25%; max-width: 25%; }
}

@media all and (max-width: 1024px) {
    .intec-grid > .intec-grid-item-1024 { flex-basis: 0; flex-grow: 1; max-width: 100%; }
    .intec-grid > .intec-grid-item-1024-auto { flex: 0 0 auto; width: auto; max-width: none; }
    .intec-grid > .intec-grid-item-1024-1 { flex: 0 0 100%; max-width: 100%; }
    .intec-grid > .intec-grid-item-1024-2 { flex: 0 0 50%; max-width: 50%; }
    .intec-grid > .intec-grid-item-1024-3 { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; }
    .intec-grid > .intec-grid-item-1024-4 { flex: 0 0 25%; max-width: 25%; }
}

@media all and (max-width: 1000px) {
    .intec-grid > .intec-grid-item-1000 { flex-basis: 0; flex-grow: 1; max-width: 100%; }
    .intec-grid > .intec-grid-item-1000-auto { flex: 0 0 auto; width: auto; max-width: none; }
    .intec-grid > .intec-grid-item-1000-1 { flex: 0 0 100%; max-width: 100%; }
    .intec-grid > .intec-grid-item-1000-2 { flex: 0 0 50%; max-width: 50%; }
    .intec-grid > .intec-grid-item-1000-3 { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; }
    .intec-grid > .intec-grid-item-1000-4 { flex: 0 0 25%; max-width: 25%; }
}

@media all and (max-width: 950px) {
    .intec-grid > .intec-grid-item-950 { flex-basis: 0; flex-grow: 1; max-width: 100%; }
    .intec-grid > .intec-grid-item-950-auto { flex: 0 0 auto; width: auto; max-width: none; }
    .intec-grid > .intec-grid-item-950-1 { flex: 0 0 100%; max-width: 100%; }
    .intec-grid > .intec-grid-item-950-2 { flex: 0 0 50%; max-width: 50%; }
    .intec-grid > .intec-grid-item-950-3 { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; }
    .intec-grid > .intec-grid-item-950-4 { flex: 0 0 25%; max-width: 25%; }
}

@media all and (max-width: 900px) {
    .intec-grid > .intec-grid-item-900 { flex-basis: 0; flex-grow: 1; max-width: 100%; }
    .intec-grid > .intec-grid-item-900-auto { flex: 0 0 auto; width: auto; max-width: none; }
    .intec-grid > .intec-grid-item-900-1 { flex: 0 0 100%; max-width: 100%; }
    .intec-grid > .intec-grid-item-900-2 { flex: 0 0 50%; max-width: 50%; }
    .intec-grid > .intec-grid-item-900-3 { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; }
    .intec-grid > .intec-grid-item-900-4 { flex: 0 0 25%; max-width: 25%; }
}

@media all and (max-width: 850px) {
    .intec-grid > .intec-grid-item-850 { flex-basis: 0; flex-grow: 1; max-width: 100%; }
    .intec-grid > .intec-grid-item-850-auto { flex: 0 0 auto; width: auto; max-width: none; }
    .intec-grid > .intec-grid-item-850-1 { flex: 0 0 100%; max-width: 100%; }
    .intec-grid > .intec-grid-item-850-2 { flex: 0 0 50%; max-width: 50%; }
    .intec-grid > .intec-grid-item-850-3 { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; }
    .intec-grid > .intec-grid-item-850-4 { flex: 0 0 25%; max-width: 25%; }
}

@media all and (max-width: 800px) {
    .intec-grid > .intec-grid-item-800 { flex-basis: 0; flex-grow: 1; max-width: 100%; }
    .intec-grid > .intec-grid-item-800-auto { flex: 0 0 auto; width: auto; max-width: none; }
    .intec-grid > .intec-grid-item-800-1 { flex: 0 0 100%; max-width: 100%; }
    .intec-grid > .intec-grid-item-800-2 { flex: 0 0 50%; max-width: 50%; }
    .intec-grid > .intec-grid-item-800-3 { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; }
    .intec-grid > .intec-grid-item-800-4 { flex: 0 0 25%; max-width: 25%; }
}

@media all and (max-width: 768px) {
    .intec-grid > .intec-grid-item-768 { flex-basis: 0; flex-grow: 1; max-width: 100%; }
    .intec-grid > .intec-grid-item-768-auto { flex: 0 0 auto; width: auto; max-width: none; }
    .intec-grid > .intec-grid-item-768-1 { flex: 0 0 100%; max-width: 100%; }
    .intec-grid > .intec-grid-item-768-2 { flex: 0 0 50%; max-width: 50%; }
    .intec-grid > .intec-grid-item-768-3 { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; }
    .intec-grid > .intec-grid-item-768-4 { flex: 0 0 25%; max-width: 25%; }
}

@media all and (max-width: 750px) {
    .intec-grid > .intec-grid-item-750 { flex-basis: 0; flex-grow: 1; max-width: 100%; }
    .intec-grid > .intec-grid-item-750-auto { flex: 0 0 auto; width: auto; max-width: none; }
    .intec-grid > .intec-grid-item-750-1 { flex: 0 0 100%; max-width: 100%; }
    .intec-grid > .intec-grid-item-750-2 { flex: 0 0 50%; max-width: 50%; }
    .intec-grid > .intec-grid-item-750-3 { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; }
    .intec-grid > .intec-grid-item-750-4 { flex: 0 0 25%; max-width: 25%; }
}

@media all and (max-width: 720px) {
    .intec-grid > .intec-grid-item-720 { flex-basis: 0; flex-grow: 1; max-width: 100%; }
    .intec-grid > .intec-grid-item-720-auto { flex: 0 0 auto; width: auto; max-width: none; }
    .intec-grid > .intec-grid-item-720-1 { flex: 0 0 100%; max-width: 100%; }
    .intec-grid > .intec-grid-item-720-2 { flex: 0 0 50%; max-width: 50%; }
    .intec-grid > .intec-grid-item-720-3 { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; }
    .intec-grid > .intec-grid-item-720-4 { flex: 0 0 25%; max-width: 25%; }
}

@media all and (max-width: 700px) {
    .intec-grid > .intec-grid-item-700 { flex-basis: 0; flex-grow: 1; max-width: 100%; }
    .intec-grid > .intec-grid-item-700-auto { flex: 0 0 auto; width: auto; max-width: none; }
    .intec-grid > .intec-grid-item-700-1 { flex: 0 0 100%; max-width: 100%; }
    .intec-grid > .intec-grid-item-700-2 { flex: 0 0 50%; max-width: 50%; }
    .intec-grid > .intec-grid-item-700-3 { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; }
    .intec-grid > .intec-grid-item-700-4 { flex: 0 0 25%; max-width: 25%; }
}

@media all and (max-width: 650px) {
    .intec-grid > .intec-grid-item-650 { flex-basis: 0; flex-grow: 1; max-width: 100%; }
    .intec-grid > .intec-grid-item-650-auto { flex: 0 0 auto; width: auto; max-width: none; }
    .intec-grid > .intec-grid-item-650-1 { flex: 0 0 100%; max-width: 100%; }
    .intec-grid > .intec-grid-item-650-2 { flex: 0 0 50%; max-width: 50%; }
    .intec-grid > .intec-grid-item-650-3 { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; }
    .intec-grid > .intec-grid-item-650-4 { flex: 0 0 25%; max-width: 25%; }
}

@media all and (max-width: 600px) {
    .intec-grid > .intec-grid-item-600 { flex-basis: 0; flex-grow: 1; max-width: 100%; }
    .intec-grid > .intec-grid-item-600-auto { flex: 0 0 auto; width: auto; max-width: none; }
    .intec-grid > .intec-grid-item-600-1 { flex: 0 0 100%; max-width: 100%; }
    .intec-grid > .intec-grid-item-600-2 { flex: 0 0 50%; max-width: 50%; }
    .intec-grid > .intec-grid-item-600-3 { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; }
    .intec-grid > .intec-grid-item-600-4 { flex: 0 0 25%; max-width: 25%; }
}

@media all and (max-width: 550px) {
    .intec-grid > .intec-grid-item-550 { flex-basis: 0; flex-grow: 1; max-width: 100%; }
    .intec-grid > .intec-grid-item-550-auto { flex: 0 0 auto; width: auto; max-width: none; }
    .intec-grid > .intec-grid-item-550-1 { flex: 0 0 100%; max-width: 100%; }
    .intec-grid > .intec-grid-item-550-2 { flex: 0 0 50%; max-width: 50%; }
    .intec-grid > .intec-grid-item-550-3 { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; }
    .intec-grid > .intec-grid-item-550-4 { flex: 0 0 25%; max-width: 25%; }
}

@media all and (max-width: 500px) {
    .intec-grid > .intec-grid-item-500 { flex-basis: 0; flex-grow: 1; max-width: 100%; }
    .intec-grid > .intec-grid-item-500-auto { flex: 0 0 auto; width: auto; max-width: none; }
    .intec-grid > .intec-grid-item-500-1 { flex: 0 0 100%; max-width: 100%; }
    .intec-grid > .intec-grid-item-500-2 { flex: 0 0 50%; max-width: 50%; }
    .intec-grid > .intec-grid-item-500-3 { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; }
    .intec-grid > .intec-grid-item-500-4 { flex: 0 0 25%; max-width: 25%; }
}

@media all and (max-width: 450px) {
    .intec-grid > .intec-grid-item-450 { flex-basis: 0; flex-grow: 1; max-width: 100%; }
    .intec-grid > .intec-grid-item-450-auto { flex: 0 0 auto; width: auto; max-width: none; }
    .intec-grid > .intec-grid-item-450-1 { flex: 0 0 100%; max-width: 100%; }
    .intec-grid > .intec-grid-item-450-2 { flex: 0 0 50%; max-width: 50%; }
    .intec-grid > .intec-grid-item-450-3 { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; }
    .intec-grid > .intec-grid-item-450-4 { flex: 0 0 25%; max-width: 25%; }
}

@media all and (max-width: 425px) {
    .intec-grid > .intec-grid-item-425 { flex-basis: 0; flex-grow: 1; max-width: 100%; }
    .intec-grid > .intec-grid-item-425-auto { flex: 0 0 auto; width: auto; max-width: none; }
    .intec-grid > .intec-grid-item-425-1 { flex: 0 0 100%; max-width: 100%; }
    .intec-grid > .intec-grid-item-425-2 { flex: 0 0 50%; max-width: 50%; }
    .intec-grid > .intec-grid-item-425-3 { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; }
    .intec-grid > .intec-grid-item-425-4 { flex: 0 0 25%; max-width: 25%; }
}

@media all and (max-width: 414px) {
    .intec-grid > .intec-grid-item-414 { flex-basis: 0; flex-grow: 1; max-width: 100%; }
    .intec-grid > .intec-grid-item-414-auto { flex: 0 0 auto; width: auto; max-width: none; }
    .intec-grid > .intec-grid-item-414-1 { flex: 0 0 100%; max-width: 100%; }
    .intec-grid > .intec-grid-item-414-2 { flex: 0 0 50%; max-width: 50%; }
    .intec-grid > .intec-grid-item-414-3 { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; }
    .intec-grid > .intec-grid-item-414-4 { flex: 0 0 25%; max-width: 25%; }
}

@media all and (max-width: 411px) {
    .intec-grid > .intec-grid-item-411 { flex-basis: 0; flex-grow: 1; max-width: 100%; }
    .intec-grid > .intec-grid-item-411-auto { flex: 0 0 auto; width: auto; max-width: none; }
    .intec-grid > .intec-grid-item-411-1 { flex: 0 0 100%; max-width: 100%; }
    .intec-grid > .intec-grid-item-411-2 { flex: 0 0 50%; max-width: 50%; }
    .intec-grid > .intec-grid-item-411-3 { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; }
    .intec-grid > .intec-grid-item-411-4 { flex: 0 0 25%; max-width: 25%; }
}

@media all and (max-width: 400px) {
    .intec-grid > .intec-grid-item-400 { flex-basis: 0; flex-grow: 1; max-width: 100%; }
    .intec-grid > .intec-grid-item-400-auto { flex: 0 0 auto; width: auto; max-width: none; }
    .intec-grid > .intec-grid-item-400-1 { flex: 0 0 100%; max-width: 100%; }
    .intec-grid > .intec-grid-item-400-2 { flex: 0 0 50%; max-width: 50%; }
    .intec-grid > .intec-grid-item-400-3 { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; }
    .intec-grid > .intec-grid-item-400-4 { flex: 0 0 25%; max-width: 25%; }
}

@media all and (max-width: 375px) {
    .intec-grid > .intec-grid-item-375 { flex-basis: 0; flex-grow: 1; max-width: 100%; }
    .intec-grid > .intec-grid-item-375-auto { flex: 0 0 auto; width: auto; max-width: none; }
    .intec-grid > .intec-grid-item-375-1 { flex: 0 0 100%; max-width: 100%; }
    .intec-grid > .intec-grid-item-375-2 { flex: 0 0 50%; max-width: 50%; }
    .intec-grid > .intec-grid-item-375-3 { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; }
    .intec-grid > .intec-grid-item-375-4 { flex: 0 0 25%; max-width: 25%; }
}

@media all and (max-width: 360px) {
    .intec-grid > .intec-grid-item-360 { flex-basis: 0; flex-grow: 1; max-width: 100%; }
    .intec-grid > .intec-grid-item-360-auto { flex: 0 0 auto; width: auto; max-width: none; }
    .intec-grid > .intec-grid-item-360-1 { flex: 0 0 100%; max-width: 100%; }
    .intec-grid > .intec-grid-item-360-2 { flex: 0 0 50%; max-width: 50%; }
    .intec-grid > .intec-grid-item-360-3 { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; }
    .intec-grid > .intec-grid-item-360-4 { flex: 0 0 25%; max-width: 25%; }
}

@media all and (max-width: 350px) {
    .intec-grid > .intec-grid-item-350 { flex-basis: 0; flex-grow: 1; max-width: 100%; }
    .intec-grid > .intec-grid-item-350-auto { flex: 0 0 auto; width: auto; max-width: none; }
    .intec-grid > .intec-grid-item-350-1 { flex: 0 0 100%; max-width: 100%; }
    .intec-grid > .intec-grid-item-350-2 { flex: 0 0 50%; max-width: 50%; }
    .intec-grid > .intec-grid-item-350-3 { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; }
    .intec-grid > .intec-grid-item-350-4 { flex: 0 0 25%; max-width: 25%; }
}

@media all and (max-width: 320px) {
    .intec-grid > .intec-grid-item-320 { flex-basis: 0; flex-grow: 1; max-width: 100%; }
    .intec-grid > .intec-grid-item-320-auto { flex: 0 0 auto; width: auto; max-width: none; }
    .intec-grid > .intec-grid-item-320-1 { flex: 0 0 100%; max-width: 100%; }
    .intec-grid > .intec-grid-item-320-2 { flex: 0 0 50%; max-width: 50%; }
    .intec-grid > .intec-grid-item-320-3 { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; }
    .intec-grid > .intec-grid-item-320-4 { flex: 0 0 25%; max-width: 25%; }
}
