/* 
===========================================
ДВУХКОЛОНОЧНАЯ ВЕРСТКА
Для страниц "О нас", "Доставка" и других
===========================================
*/

/* 
  Основной класс для двух колонок 
  Использует существующую систему grid из темы
*/

.two-columns {
  --two-cols-gap: 3rem; /* Отступ между колонками */
  --two-cols-gap-mobile: 2rem; /* Отступ на мобильных */
  
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Две равные колонки */
  gap: var(--two-cols-gap);
  align-items: start; /* Выравнивание по верху */
  width: 100%;
}

/* Элемент колонки */
.two-columns__item {
  width: 100%;
}

/* 
  Адаптивность: на мобильных колонки становятся вертикальными 
  Брейкпоинт 767px используется в существующем CSS
*/
@media (max-width: 767px) {
  .two-columns {
    grid-template-columns: 1fr;
    gap: var(--two-cols-gap-mobile);
  }
}

/* 
  Модификатор для обратного порядка колонок на мобильных
  Полезно, если важно, какая колонка будет первой на мобилке
*/
.two-columns--reverse-mobile {
  /* На десктопе порядок обычный */
}

@media (max-width: 767px) {
  .two-columns--reverse-mobile {
    /* Меняем порядок на мобильных */
    display: flex;
    flex-direction: column;
  }
  
  .two-columns--reverse-mobile .two-columns__item:first-child {
    order: 2; /* Первая колонка становится второй */
  }
  
  .two-columns--reverse-mobile .two-columns__item:last-child {
    order: 1; /* Вторая колонка становится первой */
  }
}

/* 
  Модификатор для разного соотношения колонок 
  Например, 1/3 и 2/3 ширины
*/
.two-columns--ratio-1-2 {
  grid-template-columns: 1fr 2fr;
}

.two-columns--ratio-3-1 {
  grid-template-columns: 3fr 1fr;
}

.two-columns--ratio-2-1 {
  grid-template-columns: 2fr 1fr;
}

/* 
  Модификатор для вертикального выравнивания 
*/
.two-columns--align-center {
  align-items: center;
}

.two-columns--align-bottom {
  align-items: end;
}

/* 
  Модификатор для отключения отступов по бокам 
  Если нужно растянуть на всю ширину
*/
.two-columns--full-width {
  margin-left: calc(var(--layout-side-padding) * -1);
  margin-right: calc(var(--layout-side-padding) * -1);
  padding-left: var(--layout-side-padding);
  padding-right: var(--layout-side-padding);
}

@media (max-width: 767px) {
  .two-columns--full-width {
    margin-left: calc(var(--layout-side-padding-mobile) * -1);
    margin-right: calc(var(--layout-side-padding-mobile) * -1);
    padding-left: var(--layout-side-padding-mobile);
    padding-right: var(--layout-side-padding-mobile);
  }
}

/* 
  Утилитарный класс для изображений в колонках
  Автоматическая адаптация изображений
*/
.two-columns__image {
  width: 100%;
  height: auto;
  border-radius: 4px; /* Опционально */
}

/* ==========================================
   БЛОКИ В СООТНОШЕНИИ 1:3
   Использование: .ratio-1-3
========================================== */

/* Основной контейнер */
.ratio-1-3 {
  display: grid;
  grid-template-columns: 1fr 3fr; /* Соотношение 1:3 */
  gap: 3rem;
  width: 100%;
}

.ratio-1-3__item {
  width: 100%;
}

/* Адаптивность для мобильных */
@media (max-width: 767px) {
  .ratio-1-3 {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* Обратное соотношение 3:1 */
.ratio-3-1 {
  grid-template-columns: 3fr 1fr;
}

/* Другие полезные соотношения */
.ratio-1-2 {
  grid-template-columns: 1fr 2fr;
}

.ratio-2-1 {
  grid-template-columns: 2fr 1fr;
}

.ratio-1-1 {
  grid-template-columns: 1fr 1fr; /* Равные колонки */
}

/* Модификаторы для отступов */
.ratio-1-3--gap-small {
  gap: 1.5rem;
}

.ratio-1-3--gap-large {
  gap: 4rem;
}

.ratio-1-3--no-gap {
  gap: 0;
}

/* Вертикальное выравнивание */
.ratio-1-3--align-center {
  align-items: center;
}

.ratio-1-3--align-bottom {
  align-items: end;
}

/* Для изображений в узкой колонке */
.ratio-1-3__narrow img {
  height: auto;
  border-radius: 4px; /* Опционально */
}

/* Flex блок с иконкой */
        .img-text-block {
            display: flex;
            align-items: top;
            width: 100%;
            gap: 20px;
            padding: 20px 0;
            box-sizing: border-box;
        }
        
        .img-text-block .img {
            flex-shrink: 0;
            width: 60px;
            height: 60px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .img-text-block .img.color-01 {
          background-color: #F7F7F7;
        }
        
        .img-text-block .img img {
            width: 50px;
            height: 50px;
        }
        
        .img-text-block .text-content {
            flex: 1;
        }
        
        /* Мобильная версия */
        @media (max-width: 768px) {
            .img-text-block {
                flex-direction: column;
                gap: 15px;
            }
            
            .img-text-block .img {
                margin-bottom: 5px;
            }
        }
        /* end Flex блок с иконкой */

        /* ==========================================
   БЛОКИ С РАЗНЫМИ СООТНОШЕНИЯМИ
========================================== */

.ratio-1-3 {
  display: grid;
  grid-template-columns: 1fr 3fr; /* 1:3 = 25%:75% */
  gap: 3rem;
  width: 100%;
}

.ratio-3-1 {
  grid-template-columns: 3fr 1fr; /* 3:1 = 75%:25% */
}

.ratio-1-2 {
  grid-template-columns: 1fr 2fr; /* 1:2 = 33%:67% */
}

.ratio-2-1 {
  grid-template-columns: 2fr 1fr; /* 2:1 = 67%:33% */
}

.ratio-1-1 {
  grid-template-columns: 1fr 1fr; /* 1:1 = 50%:50% */
}

/* Общие стили для всех колонок */
.ratio-1-3__item {
  width: 100%;
}

/* КРИТИЧЕСКИ ВАЖНО: Адаптивность для мобильных */
@media screen and (max-width: 767px) {
  .ratio-1-3 {
    grid-template-columns: 1fr !important;
    display: flex !important;
    flex-direction: column;
    gap: 2rem;
  }
  
  .ratio-3-1,
  .ratio-1-2,
  .ratio-2-1,
  .ratio-1-1 {
    grid-template-columns: 1fr !important;
    display: flex !important;
    flex-direction: column;
    gap: 2rem;
  }
  
  /* Для обратного порядка на мобильных если нужно */
  .ratio-3-1 {
    flex-direction: column;
  }
}
Альтернативно: более сильное решение с !important
Если предыдущий CSS не работает, добавьте этот более специфичный:

css
/* СИЛЬНЫЙ CSS ДЛЯ МОБИЛЬНОЙ АДАПТАЦИИ */
@media only screen and (max-width: 767px) {
  div.ratio-1-3,
  div[class*="ratio-"] {
    display: block !important;
    grid-template-columns: none !important;
  }
  
  .ratio-1-3__item,
  .ratio-1-3__narrow,
  .ratio-1-3__item[class] {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    display: block !important;
    margin-bottom: 2rem !important;
  }
  
  /* Убираем все grid свойства на мобильных */
  .ratio-1-3,
  .ratio-3-1,
  .ratio-1-2,
  .ratio-2-1,
  .ratio-1-1 {
    display: block !important;
    grid: none !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
  }
}

/* ==========================================
   КЛАСС ДЛЯ ОБРАТНОГО ПОРЯДКА НА МОБИЛЬНЫХ
========================================== */

/* Обычный порядок на десктопе */
.ratio-1-3.reverse-mobile {
  display: grid;
  grid-template-columns: 1fr 3fr;
}

/* Обратный порядок на десктопе */
.ratio-3-1.reverse-mobile {
  grid-template-columns: 3fr 1fr;
}

/* Меняем порядок на мобильных */
@media screen and (max-width: 767px) {
  .ratio-1-3.reverse-mobile,
  .ratio-3-1.reverse-mobile {
    display: flex !important;
    flex-direction: column-reverse !important;
    gap: 2rem;
  }
  
  .ratio-1-3__item {
    width: 100% !important;
  }
}