Use different thumbnails based on the device

Author: akshay-rajan

main/static/main/css/style.css

@@ -229,6 +229,9 @@ nav .nav-link:hover::after {
   border-radius: 20px;
   box-shadow: -5px 10px 10px rgba(0, 0, 0, 0.3);
 }
+.mobile-thumbnail-img {
+  display: none;
+}
 
 .div-5 {
   min-height: 30vh;
@@ -245,17 +248,29 @@ nav .nav-link:hover::after {
   .div-3 {
     height: 100vh;
     margin-right: 0!important;
-    margin-top: 60vh;
+    margin-top: 50vh;
     width: 100%;
     height: 100%;
     left: 0;
     transform: none;
     overflow:hidden;
   }
+  .thumbnail-img {
+    display: none;
+  }
   .div-3 img {
-    left: 50%;
-    transform: translateX(10%); /* Center align horizontally */
-    margin: 4px;
+    width: auto;
+    height: auto;
+    border-radius: 7px;
+  }
+  #thumbnail.div-3 {
+    display: flex;
+    justify-content: center;
+  }
+  .mobile-thumbnail-img {
+    display: block;
+    max-width: 90vw;
+    max-height: 70vh;
   }
   .div-4 h2 {
     text-align: center;

main/static/main/img/thumbnail.png

@@ -83,6 +83,7 @@ <h1 class="text-white fade-in" id="main-title">
 
   <div class="div-3 fade-in-2" id="thumbnail">
     <img src={% static 'main/img/thumbnail.png' %} alt="" class="thumbnail-img" draggable="false">
+    <img src={% static 'main/img/thumbnail2.png' %} alt="" class="mobile-thumbnail-img" draggable="false">
   </div>
 
   <div class="div-4 m-2 mb-4 p-2">