fix

static/css/style.css

@@ -21,6 +21,9 @@
       .card .card-img-overlay .card-title-bg .card-text {
         opacity: 1; }
 
+a .card, a .card:hover {
+  color: inherit; }
+
 .modal-body img {
   margin: 10px; }
 

static/css/style.scss

@@ -45,6 +45,12 @@ $half-margin: $margin / 2;
   }
 }
 
+a {
+  .card, .card:hover {
+    color: inherit;
+  }
+}
+
 // Modal
 
 .modal-body {

templates/main/index.html

@@ -13,8 +13,7 @@
                     >
                         <div class="card border-light">
                             <img class="card-img" src="{{ post.images[0].uri }}" alt="random image">
-
+                            <div class="card-img-overlay d-none d-md-flex align-items-center justify-content-center">
-                            <div class="card-img-overlay d-flex align-items-center justify-content-center">
                                 <div class="card-title-bg bg-white  w-100 d-flex align-items-center justify-content-center">
                                     <h5 class="card-text text-dark">{{ post.title|safe }}</h5>
                                 </div>

templates/main/modal.html

@@ -3,6 +3,9 @@
     <div class="modal-dialog modal-lg" role="document">
         <div class="modal-content">
             <div class="modal-body">
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
                 <div class="container-fluid">
                     <div class="row justify-content-center text-justify">
                         <div id="details-intro" class="text-center col-10"></div>