.ludo {
    margin:20px auto;
}
.cl {
    display: block;
    margin: 20px auto;
    text-align: center;
}
.ludo img {
  display: block;
  margin: 0;
}
/* Фиксируем высоту иллюстраций (дизайн-инвариант) */
.ludo-frame{
  height: 300px;               /* при необходимости поменяешь на 280/320 и т.д. */
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2px;                 /* перенёс “2px” с img, чтобы рамка выглядела так же */
}

/* Изображение вписывается в рамку без обрезки, пропорции сохраняются */
.ludo-frame img{
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
  object-position: center bottom;
}
.txtbold {
    font-weight:bold;
}
.ludo p {
   margin: 0 1em 1em 1em;
   line-height: 1em;
}

@media (max-width: 1100px) {
.ludo img {
    max-width: 600px;
}
}
@media (max-width: 1000px) {
.ludo img {
    max-width: 550px;
}
}

@media (max-width: 800px) {
.ludo img {
    width: 100%;
    height: auto;
    display: block;
}
}