@media (max-width: 991px) {
    /* Direct cells only, so nested tables such as #damage_recon keep their own wrapping */
    .viewvehicle-details-table > tbody > tr > td {
        white-space: normal;
        overflow-wrap: break-word;
    }

    .viewvehicle-images {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .viewvehicle-images a.fancybox,
    .viewvehicle-images .vehicle_img {
        flex: 0 1 200px;
        min-width: 0;
        max-width: 100%;
    }

    .viewvehicle-images img {
        max-width: 100%;
        height: auto;
    }

    .viewvehicle-images img.img-polaroid {
        width: 100%;
    }

    .viewvehicle-images #panorama {
        width: 100% !important;
        max-width: 260px;
        height: 260px;
    }

    /* The inline fixed layout squeezes the recon description column so
       words split into fragments; size columns to content instead */
    #damage_recon {
        table-layout: auto !important;
    }
}

/* Damage recon thumbnails are table cells (one td per image) and table
   rows cannot wrap at any viewport, so always lay them out as wrapping
   flex items (applies at all widths, not just mobile) */
#damage_recon td > table,
#damage_recon td > table > tbody {
    display: block;
    width: 100%;
}

#damage_recon td > table > tbody > tr {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#damage_recon td > table > tbody > tr > td {
    display: block;
    flex: 0 1 auto;
    min-width: 0;
    padding: 0;
}

#damage_recon img.damage_images {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 100px;
}