Merge branch 'ACP2E-2966' of https://github.com/adobe-commerce-tier-4/magento2ce into T4-PR-06-14-2024

Author: chittima

app/code/Magento/ProductVideo/view/frontend/web/js/fotorama-add-video-events.js

@@ -122,7 +122,7 @@ define([
         isFullscreen: false,
         FTCF: '[data-gallery-role="fotorama__fullscreen-icon"]',
         Base: 0, //on check for video is base this setting become true if there is any video with base role
-        MobileMaxWidth: 768,
+        MobileMaxWidth: 767,
         GP: 'gallery-placeholder', //gallery placeholder class is needed to find and erase <script> tag
         videoData: null,
         videoDataPlaceholder: [{

app/design/frontend/Magento/blank/etc/view.xml

@@ -232,7 +232,7 @@
         <var name="breakpoints">
             <var name="mobile">
                 <var name="conditions">
-                    <var name="max-width">768px</var>
+                    <var name="max-width">767px</var>
                 </var>
                 <var name="options">
                     <var name="options">

app/design/frontend/Magento/luma/etc/view.xml

@@ -238,7 +238,7 @@
         <var name="breakpoints">
             <var name="mobile">
                 <var name="conditions">
-                    <var name="max-width">768px</var>
+                    <var name="max-width">767px</var>
                 </var>
                 <var name="options">
                     <var name="options">

lib/web/css/source/lib/_responsive.less

@@ -27,11 +27,11 @@
 
 & when (@media-target = 'mobile'), (@media-target = 'all') {
 
-    @media only screen and (max-width: (@screen__m + 1)) {
+    @media only screen and (max-width: @screen__m) {
         .media-width('max', (@screen__m + 1));
     }
 
-    @media only screen and (max-width: @screen__m) {
+    @media only screen and (max-width: (@screen__m - 1)) {
         .media-width('max', @screen__m);
     }
 
@@ -59,14 +59,14 @@
 
 & when (@media-target = 'desktop'), (@media-target = 'all') {
 
-    @media all and (min-width: (@screen__m + 1)),
+    @media all and (min-width: @screen__m),
     print {
-        .media-width('min', (@screen__m + 1));
+        .media-width('min', @screen__m);
     }
 
     @media all and (min-width: (@screen__m + 1)),
     print {
-        .media-width('min', (@screen__m));
+        .media-width('min', (@screen__m + 1));
     }
 
     @media all and (min-width: @screen__l),