Fix Layout builder section background image rendering original image, no image styles, no lazy loading

Having a hint of a good solution with "Using attr to set css variable inline"

In the buildBackgroundMediaImage

The $style = 'background-image: url(' . $background_url . ');';
could be manged with media selection for each breakpoints

• xs
  

  $style .= '@media (max-width: 576px) {';
  $style .= '  background-image: attr(data-bs-xs-bg-image);';
  $style .= '}';
  

• sm
  

  $style .= '@media (min-width: 576px) {';
  $style .= '  background-image: attr(data-bs-sm-bg-image);';
  $style .= '}';
  

• md
  

  $style .= '@media (min-width: 768px) {';
  $style .= '  background-image: attr(data-bs-md-bg-image);';
  $style .= '}';
  

• lg
  

  $style .= '@media (min-width: 992px) {';
  $style .= '  background-image: attr(data-bs-lg-bg-image);';
  $style .= '}';
  

• xl
  

  $style .= '@media (min-width: 1200px) {';
  $style .= '  background-image: attr(data-bs-xl-bg-image);';
  $style .= '}';
  

• xxl
  

  $style .= '@media (min-width: 1400px) {;
  $style .= '  background-image: attr(data-bs-xxl-bg-image);';
  $style .= '}';
  

And add the "data-bs-xs-bg-image", "data-bs-sm-bg-image", "data-bs-md-bg-image", "data-bs-lg-bg-image", "data-bs-xl-bg-image", "data-bs-xxl-bg-image" data attributes to the section main element ( template, by passing the selected image style for each breakpoints).

---
It is possible to add an integration with Drimage using this way too