/* Блок Каталог */

.content-4 {
  margin-left: 15%;
  margin-right: 15%;
  padding: 20px;
}

/* Обновленные стили для контейнера изображений */
.image-container {
  display: flex;
  justify-content: flex-start; /* Изменяем выравнивание на начало контейнера */
  align-items: start;
  flex-wrap: wrap; /* Разрешаем перенос элементов на новую строку */
}

.image-container > div {
  width: calc(50% - 20px); /* Ширина каждого блока с изображением и текстом */
  margin: 10px; /* Отступы для всех сторон */
  text-align: center; /* Выравниваем текст по центру */
}

.image-container > div img {
  width: 100%; /* Задаем ширину изображения внутри блока */
  height: auto; /* Позволяет сохранить пропорции */
}

.otstup {
  height: 95px; /* Высота отступа для обычных устройств */
}

/* Медиа-запрос для изменения ширины блоков изображений на планшетах */
@media screen and (max-width: 992px) {
  .content {
    margin-left: 10%; /* Уменьшаем левый отступ */
    margin-right: 10%; /* Уменьшаем правый отступ */
  }

  .content-4 {
    margin-left: 10%; /* Уменьшаем левый отступ */
    margin-right: 10%; /* Уменьшаем правый отступ */
  }
}

/* Медиа-запрос для изменения ширины блоков изображений на мобильных устройствах */
@media screen and (max-width: 576px) {
  .content {
    margin-left: 5%; /* Уменьшаем левый отступ */
    margin-right: 5%; /* Уменьшаем правый отступ */
  }

  .content-4 {
    margin-left: 1%; /* Уменьшаем левый отступ */
    margin-right: 2%; /* Уменьшаем правый отступ */
  }

  .image-container > div {
    width: calc(
      100% - 20px
    ); /* Ширина каждого блока на 100% экрана с учетом отступов */
    margin: 10px; /* Отступы для всех сторон */
    text-align: center; /* Выравниваем текст по центру */
  }

  .otstup {
    height: 50px; /* Устанавливаем большую высоту отступа на мобильных устройствах */
    overflow: hidden; /* Обеспечиваем, что никакой контент не будет отображаться */
  }
}