/* ===========================
   tenant_settings_custom_backgrounds.css

   Task #1 + #6 combined: 
   The background preview changes size based on media queries 
   or a phone vs. desktop style. 
   If you want a quick approximate approach:

   (A) "phone" => max-width: 768px 
   (B) "desktop" => anything larger
=========================== */

/* By default, we might do 700px for desktop: */
#background-preview #bg-preview-img {
    width: 700px;  /* desktop default width */
    max-width: 100%; /* ensure it doesn't overflow container */
  }
  
  /* On smaller screens, say under 768px, reduce to 300px: */
  @media (max-width: 768px) {
    #background-preview #bg-preview-img {
      width: 300px;
    }
  }