cambios 4:3

app/styles.css

@@ -109,14 +109,6 @@ section.sub-brand {
     margin-bottom: 2rem;
 }
 
-section.sub-brand img {
-    max-height: 50px;
-}
-
-section.sub-brand p {
-    padding-top: 12px;
-}
-
 hr {
     margin: 45px auto;
 }
@@ -208,6 +200,44 @@ section#cover p {
 .polyqwerty a span { background:#ecf0f3 url(../imgs/sub-brands/poly-qwerty-logo.svg) no-repeat left top;}
 .polykit a span { background:#ecf0f3 url(../imgs/sub-brands/polykit-logo.svg) no-repeat left top;}
 
+/* grid for sub-brands */
+.sub-brand {
+    display: grid;
+    grid-template-areas:
+    'logos'
+    'screens'
+    'texts'
+    'links';
+    gap: 1rem;
+}
+
+.sub-brand p {
+    margin-bottom: unset;
+    padding-top: unset;
+}
+@media (min-width: 768px) {
+    .sub-brands-container {
+        padding-inline: 20px;
+    }
+    .sub-brand {
+        grid-template-areas:
+        'logos logos'
+        'screens texts'
+        'screens links';
+    }
+    .sub-brand .screen {
+        margin-top: unset;
+        aspect-ratio: 4/3;
+        width: 100%;
+        max-width: 210px;
+    }
+}
+
+.--sub-brand { grid-area: logos;}
+.sub-brand p { grid-area: texts;}
+.sub-brand .links { grid-area: links;}
+.sub-brand .screen { grid-area: screens;}
+/* end grid for sub-brands */
 
 /* issue to talk, this is not mobile first polykit*/
 section#cover {
@@ -217,7 +247,6 @@ h2.title-2 {
     margin-top: 0;
     padding-top: 0;
 }
-
 .current-page {
     opacity: 0.4;
 }

index.php

@@ -76,50 +76,55 @@
                 <h3 class="polyfen --sub-brand">
                     <a href="https://polyfen.com" target="_blank" class="web-url">Polyfen<span></span></a>
                 </h3>
+                <img class="screen" src="imgs/sub-brands/polyfen-screen.png" alt="">
                 <p>Creative agency offering design, marketing, and software development services for new and emerging
                     businesses.</p>
-                <a href="https://polyfen.com" target="_blank" class="web-url"><img src="imgs/icons/globe.svg"
+                <a href="https://polyfen.com" target="_blank" class="links web-url"><img src="imgs/icons/globe.svg"
                         class="web-icon" alt="">polyfen.com</a>
             </section>
             <hr>
             <section class="sub-brand">
                 <h3 class="polyatlas --sub-brand">
                     <a href="https://polyatlas.wiki" target="_blank" class="web-url">Polyatlas<span></span></a>
                 </h3>
+                <img class="screen" src="imgs/sub-brands/polyatlas-screen.png" alt="">
                 <p>Open-source step-by-step guide to the Branding process, including practical tips, case studies,
                     template files, and many other useful resources.</p>
-                <a href="https://polyatlas.wiki" target="_blank" class="web-url"><img src="imgs/icons/globe.svg"
+                <a href="https://polyatlas.wiki" target="_blank" class="links web-url"><img src="imgs/icons/globe.svg"
                         class="web-icon" alt="">polyatlas.wiki</a>
             </section>
             <hr>
             <section class="sub-brand">
                 <h3 class="polycookies --sub-brand">
                     <a href="https://polycookies.com" target="_blank" class="web-url">Polycookies<span></span></a>
                 </h3>
+                <img class="screen" src="imgs/sub-brands/polycookies-screen.png" alt="">
                 <p>Open-source solution to privacy policy implementing a cookie consent banner with Google Tag Manager.
                 </p>
-                <a href="https://polycookies.com" target="_blank" class="web-url"><img src="imgs/icons/globe.svg"
+                <a href="https://polycookies.com" target="_blank" class="links web-url"><img src="imgs/icons/globe.svg"
                         class="web-icon" alt="">polycookies.com</a>
             </section>
             <hr>
             <section class="sub-brand">
                 <h3 class="polyqwerty --sub-brand">
                     <a href="https://polyqwerty.com" target="_blank" class="web-url">polyqwerty<span></span></a>
                 </h3>
+                <img class="screen" src="imgs/sub-brands/polyqwerty-screen.png" alt="">
                 <p>Your keyboard's assistant. Click on a character to copy it.</p>
-                <a href="https://polyqwerty.com" target="_blank" class="web-url"><img src="imgs/icons/globe.svg"
+                <a href="https://polyqwerty.com" target="_blank" class="links web-url"><img src="imgs/icons/globe.svg"
                         class="web-icon" alt="">polyqwerty.com</a>
             </section>
             <hr>
             <section class="sub-brand">
                 <h3 class="polykit --sub-brand">
                     <a href="https://polykit.xyz" target="_blank" class="web-url">polykit<span></span></a>
                 </h3>
-
-                <small class="caption" style="opacity: 0.6;"><br><br>// Work in Progress //</small>
+                <img class="screen" src="imgs/sub-brands/polykit-screen.png" alt="">
                 <p>Open-source design system for User Interfaces with CSS code for developers and Figma library for
-                    designers.</p>
-                <a href="https://polykit.xyz" target="_blank" class="web-url"><img src="imgs/icons/globe.svg"
+                    designers.
+                    <small class="caption" style="opacity: 0.6;"><br>// Work in Progress //</small>
+                </p>
+                <a href="https://polykit.xyz" target="_blank" class="links web-url"><img src="imgs/icons/globe.svg"
                         class="web-icon" alt="">polykit.xyz</a>
             </section>
             <hr>