Done with the samples, and can be released as first version!

static/css/main.css

@@ -151,9 +151,12 @@ body {
 }
 
 .main .card img {
-    width: 100%;
-    height: 150px;
-    object-fit: cover;
+    width: fit-content;
+    height: fit-content;
+    margin: auto;
+    max-height: 150px;
+    max-width: 100%;
+    object-fit: contain;
     border-radius: 8px;
     margin-bottom: 10px;
 }
@@ -220,4 +223,53 @@ body {
 
 .footer a:hover {
     text-decoration: underline;
-}
+}
+
+.card-buttons {
+    display: flex;
+    justify-content: center;
+    gap: 20px;
+    margin-top: 15px;
+    height: fit-content;
+}
+
+.card-buttons .btn {
+    padding: 12px 24px;
+    font-size: 1rem;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    text-transform: uppercase;
+    color: #fff;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: transform 0.3s ease, background 0.3s ease;
+    width: 100%;
+    max-width: 160px;
+    height: 100%;
+}
+
+.card-buttons .btn {
+    background: linear-gradient(to right, #5a0fb8, #1f65d6);
+}
+
+.card-buttons .btn:hover {
+    background: linear-gradient(to right, #1f65d6, #5a0fb8);
+    transform: scale(1.05);
+}
+
+.card .topics {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 8px;
+    margin: 5px;
+}
+
+.card .topics .topic {
+    font-size: 0.85em;
+    color: #777;
+    background-color: #efefef;
+    border-radius: 16px;
+    padding: 4px 10px;
+    height: fit-content;
+}