.image-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 20px;
}

.image-item img {
  width: 100%;
  height: auto;
  cursor: pointer;
  border: 1px solid black;
  transition: transform 0.3s, border-color 0.3s;
}

.image-item img:hover {
  transform: scale(1.05); /* Увеличиваем картинку при наведении */
  border-color: red; /* Изменяем цвет рамки при наведении */
}
@media (max-width: 768px) {
  .image-grid {
    grid-template-columns: repeat(
      2,
      1fr
    ); /* Меняем на 2x2 сетку на мобильных устройствах */
  }
}