.card-img {
    width: 100%; /* Заполняет всю ширину карточки */
    height: 200px; /* Фиксированная высота */
    object-fit: cover; /* Изображение обрезается по краям, сохраняя пропорции */
  }

  .card-img2 {
    width: 100%; /* Заполняет всю ширину карточки */
    height: 300px; /* Фиксированная высота */
    object-fit: cover; /* Изображение обрезается по краям, сохраняя пропорции */
  }

    /* Для мобильных устройств (по умолчанию) изображение будет занимать всю ширину */
    .cano {
      width: 100%;
    }
  
    /* Для десктопов ограничиваем размер */
    @media (min-width: 768px) {
      .cano {
        width: 70%; /* Вы можете изменить это значение, чтобы получить нужный размер */
        margin-left: auto;
        margin-right: auto;
      }
    }
  
    /* Для еще большего разрешения (например, планшеты и десктопы с большим экраном) */
    @media (min-width: 1024px) {
      .cano {
        width: 50%; /* Уменьшаем еще больше, если нужно */
      }
    }