.content-blog {
  margin-left: 15%; /* Левый отступ в процентах */
  margin-right: 15%; /* Правый отступ в процентах */
  padding: 20px;
}

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

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

.white-background {
  position: relative;
  padding: 20px;
  padding-left: 40px; /* Отступ от левого края */
  margin-bottom: 40px; /* Увеличенный отступ снизу */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); /* Легкая тень */
  background-size: cover; /* Изображение охватывает весь контейнер */
  background-position: center; /* Изображение центрируется */
  color: white; /* Белый текст */
  min-height: 400px; /* Минимальная высота блока */
  cursor: pointer; /* Указатель, чтобы указать, что это ссылка */
  text-decoration: none; /* Убрать подчеркивание текста */
}

.white-background::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3); /* Полупрозрачный чёрный цвет */
}

.white-background p,
.white-background h4,
.white-background h3 {
  position: relative; /* Чтобы заголовки остались над наложением */
  z-index: 0.5; /* Установка заголовков над наложением */
}
/* Дополнительные стили для hover-эффекта */
.white-background:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.9); /* Увеличенная тень при наведении */
  opacity: 0.8; /* Легкое затемнение при наведении */
}

.no-background {
  padding: 20px;
  padding-left: 40px; /* Отступ от левого края */
  margin-bottom: 40px; /* Увеличенный отступ снизу */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Легкая тень */
  background-size: cover; /* Изображение охватывает весь контейнер */
  background-position: center; /* Изображение центрируется */
  min-height: 160px; /* Минимальная высота блока */
  color: black;
}

.no-background h4 {
  margin-top: 20px;
  margin-right: 10px; /* Отступ справа */
  vertical-align: top; /* Выравнивание текста по верхнему краю */
  color: black;
}

.no-background p {
  color: black;
}

.no-background h3 {
  margin-top: -60px;
  margin-left: 150px; /* Отступ слева */
  vertical-align: top; /* Выравнивание текста по верхнему краю */
  color: black;
}

.white-background h4,
.dark-background h4 {
  margin-top: 140px;
  margin-right: 10px; /* Отступ справа */
  vertical-align: top; /* Выравнивание текста по верхнему краю */
}

.white-background h3,
.dark-background h3 {
  margin-top: -60px;
  margin-left: 150px; /* Отступ слева */
  vertical-align: top; /* Выравнивание текста по верхнему краю */
}

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

.image-container {
  max-width: 100%;
  height: auto;
  overflow: hidden;
  margin-bottom: 20px; /* Добавим небольшой отступ снизу */
}

.image-container img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

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

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

  .white-background {
    padding: 10px; /* Уменьшаем отступы внутри блока новостей */
    padding-left: 20px; /* Отступ от левого края */
    margin-bottom: 20px; /* Уменьшенный отступ снизу */
    min-height: auto; /* Автоматическая высота блока */
    width: calc(100% - 40px); /* Увеличиваем ширину блока на ширину отступов */
  }

  .white-background h4,
  .white-background h3 {
    margin-top: 10px; /* Уменьшаем отступ сверху для заголовков */
  }

  .no-background,
  .no-background h4,
  .no-background h3 {
    margin-top: 10px; /* Уменьшаем отступ сверху для блока без фона и его заголовков */
  }
}

.desktop-image {
  display: block; /* Показываем изображение только на десктопах */
  max-width: 100%; /* Максимальная ширина изображения */
  height: auto; /* Автоматическая высота */
}

.mobile-image {
  display: none; /* Скрываем изображение на десктопах */
}

/* Медиа-запрос для мобильных устройств */
@media screen and (max-width: 576px) {
  .desktop-image {
    display: none; /* Скрываем изображение на мобильных устройствах */
  }

  .mobile-image {
    display: block; /* Показываем изображение только на мобильных устройствах */
    max-width: 100%; /* Максимальная ширина изображения */
    height: auto; /* Автоматическая высота */
  }
}