MWPW-151932 - Section metadata style grid enhancement for tablet VP (#…

…2800)

* poc for up-tablet

* moved one-up to approp mq

* remove redundant two-up-tablet. Use min-max defaults

libs/blocks/section-metadata/section-metadata.css

@@ -248,12 +248,17 @@ main > .section[class*='-up'] > .content {
   .section.two-up.reverse-mobile > div:nth-child(2) {
     order: 1;
   }
+
 }
 
 @media screen and (min-width: 600px) and (max-width: 1200px) {
   .section.five-up {
     grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   }
+
+  .section.one-up-tablet { grid-template-columns: 1fr; }
+  .section.three-up-tablet { grid-template-columns: repeat(3, 1fr); }
+  .section.four-up-tablet { grid-template-columns: repeat(4, 1fr); }
 
   .section.masonry-layout {
     grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
@@ -264,15 +269,6 @@ main > .section[class*='-up'] > .content {
   }
 }
 
-@media screen and (max-width: 900px) {
-  .section.two-up.one-up-tablet,
-  .section.three-up.one-up-tablet,
-  .section.four-up.one-up-tablet,
-  .section.five-up.one-up-tablet {
-    grid-template-columns: 1fr;
-  }
-}
-
 @media screen and (min-width: 720px) {
   .section.grid-width-6 {
     padding-left: calc((100vw - 600px) / 2);