force aspect ratio on non square images

Author: jwcooper

assets/sass/pages/_home.scss

@@ -9,8 +9,9 @@
     margin-bottom: 20px;
 
     .text {
+      aspect-ratio: 1/1;
       background-color: #fff;
-      border-radius: 50px;
+      border-radius: 25px;
       padding: 40px;
 
       .title {
@@ -33,15 +34,12 @@
     }
 
     .image {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      overflow: hidden;
-
       img {
+        aspect-ratio: 1/1;
+        object-fit: cover;
         width: 100%;
         height: auto;
-        border-radius: 50px;
+        border-radius: 25px;
       }
     }
   }

index.html

@@ -17,7 +17,7 @@
         <a href="https://learn.adafruit.com/welcome-to-circuitpython">Get Started</a>
       </div>
     </div>
-    <div class="image img-responsive-4by3">
+    <div class="image">
       <img class="image-headline" alt=""
                                 src="{{ "assets/images/learn/sketch_drawing_toy.jpg" |
                                         relative_url }}"