img {
vertical-align: middle; /* Убирает лишние отступы при inline-block элементах */
border-style: none; /* Убирает рамку вокруг изображения (например, в IE) */
width: 100%; /* Ширина изображения будет равна ширине родительского контейнера */
height: auto; /* Сохраняет пропорции изображения */
max-width: 100%; /* Ограничивает максимальную ширину, чтобы изображение не выходило за пределы контейнера */
display: block; /* Устраняет проблемы с выравниванием и пробелами под изображением */
object-fit: cover; /* Обеспечивает корректное масштабирование изображения внутри контейнера */
border-radius: 8px; /* Добавляет скругление углов для более современного вида */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Добавляет легкую тень для глубины */
transition: transform 0.3s ease, box-shadow 0.3s ease; /* Плавный переход при наведении */
}
img:hover {
transform: scale(1.05); /* Легкое увеличение изображения при наведении */
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Усиление тени при наведении */
}