Ticket #46363: 46363.3.diff

src/wp-admin/css/about.css

@@ -307 +307 @@
                 padding-top: 16px;
                 padding-bottom: 16px;
         }
+
+        .about__section.med-2-columns {
+                display: -ms-grid;
+                display: grid;
+                -ms-grid-columns: (1fr)[2];
+                grid-template-columns: repeat(2, 1fr);          
+        }
+
+        .about__section.med-2-columns .column:nth-of-type(2n+1) {
+                -ms-grid-column: 1;
+                grid-column-start: 1;
+        }
+
+        .about__section.med-2-columns .column:nth-of-type(2n) {
+                -ms-grid-column: 2;
+                grid-column-start: 2;
+        }
 }
 
 @media screen and (max-width: 600px) {
@@ -327 +344 @@
         }
 }
 
+@media screen and (max-width: 420px) {
+        .about__section.med-2-columns {
+                display: block;
+                padding-bottom: 16px;
+        }
+
+        .about__section.med-2-columns .column:nth-of-type(n) {
+                padding-top: 16px;
+                padding-bottom: 16px;
+        }
+}
+
+
 /* 1.2 - Typography & Elements */
 
 .about__container {
@@ -1113 +1143 @@
 }
 
 .freedoms-php .column .freedoms-image {
-        background-image: url('../images/freedoms-2x.png');
+        background-image: url('../images/freedoms.png');
         background-size: 100%;
         padding-top: 100%;
 }

src/wp-admin/freedoms.php

@@ -59 +59 @@
 
         <hr />
 
-        <div class="about__section has-4-columns">
+        <div class="about__section has-4-columns med-2-columns">
                 <div class="column">
                         <div class="freedoms-image"></div>
                         <h2 class="is-smaller-heading"><?php _e( 'The 1st Freedom' ); ?></h2>