fix: uneven gap social media card (#141)

Author: fzn0x

src/component-card.html

@@ -154,36 +154,6 @@ <h4 class="card-title mb-0">Video Card</h4>
                         </div>
                     </div>
                 </div>
-                <div class="card">
-                    <div class="card-content">
-                        <div class="card-body">
-                            <h4 class="card-title mb-0">Social Media</h4>
-                        </div>
-                        <div class="embed-responsive embed-responsive-item embed-responsive-16by9 w-100">
-                                <img src="assets/images/samples/building.jpg" style="width:100%" height="180">
-                        </div>
-                        <div class="btn-group align-items-center mx-2 px-1 pt-1">
-                            <button type="button" class="btn btn-link p-2 m-1 text-decoration-none">
-                                <i class="bi bi-heart d-flex align-items-center justify-content-center text-secondary"></i>
-                            </button>
-                            <button type="button" class="btn btn-link p-2 m-1 text-decoration-none">
-                                <i class="bi bi-chat d-flex align-items-center justify-content-center text-secondary"></i>
-                            </button>
-                            <button type="button" class="btn btn-link p-2 m-1 text-decoration-none">
-                                <i class="bi bi-bookmark d-flex align-items-center justify-content-center text-secondary"></i>
-                            </button>
-                        </div>
-                        <div class="card-body pt-0">
-                            <p class="card-text mb-0">
-                                Candy Cupcake sugar plum oat cake wafer marzipan jujubes.
-                                Jelly-o sesame snaps cheesecake topping. Cupcake fruitcake macaroon donut pastry gummies
-                                tiramisu
-                                chocolate bar muffin.
-                            </p>
-                            <a href="#" class="card-link"><small>Read 12 Comments</small></a>
-                        </div>
-                    </div>
-                </div>
             </div>
             <div class="col-xl-4 col-md-6 col-sm-12">
                 <div class="card">
@@ -284,6 +254,35 @@ <h4 class="card-title">Feedback Form</h4>
                     </div>
                 </div>
             </div>
+            <div class="col-md-6 col-sm-12">
+                <div class="card">
+                    <div class="card-content">
+                        <img class="card-img-bottom img-fluid" src="assets/images/samples/building.jpg"
+                            alt="Card image cap" style="height: 20rem; object-fit: cover;">
+                        <div class="card-body">
+                            <h4 class="card-title">Social Media</h4>
+                            <p class="card-text">
+                                Candy Cupcake sugar plum oat cake wafer marzipan jujubes.
+                                Jelly-o sesame snaps cheesecake topping. Cupcake fruitcake macaroon donut pastry gummies
+                                tiramisu
+                                chocolate bar muffin.
+                            </p>
+                            <a href="#" class="card-link"><small>Read 12 Comments</small></a>
+                        </div>
+                        <div class="btn-group align-items-center mx-2 px-1">
+                            <button type="button" class="btn btn-link p-2 m-1 text-decoration-none">
+                                <i class="bi bi-heart d-flex align-items-center justify-content-center text-secondary"></i>
+                            </button>
+                            <button type="button" class="btn btn-link p-2 m-1 text-decoration-none">
+                                <i class="bi bi-chat d-flex align-items-center justify-content-center text-secondary"></i>
+                            </button>
+                            <button type="button" class="btn btn-link p-2 m-1 text-decoration-none">
+                                <i class="bi bi-bookmark d-flex align-items-center justify-content-center text-secondary"></i>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
             <div class="col-md-6 col-sm-12">
                 <div class="card">
                     <div class="card-content">