/* ตั้งค่าปกติ (mobile-first) */
.img-xl-300 {
    object-fit: cover;
    /* ไม่กำหนดความสูงตรงนี้
       เพื่อให้รูปปรับตามเนื้อหาได้ตามปกติ */
}

/* เมื่อจอมีความกว้าง ≥ 1200px (xl ขึ้นไป) */
@media (min-width: 1200px) {
    .img-xl-300 {
        height: 300px;
    }
}