Update custom.scss

Author: NetrunnerCodex

_sass/custom/custom.scss

@@ -10,46 +10,53 @@
     border: none; /* Clean edges */
 }
 
+/* Title Container */
 .title-container {
     flex: 1; /* Ensures the text container takes up available space */
     padding: 15px; /* Adds spacing around the text */
     color: #ffffff; /* White text for contrast */
-    background-image: url('/assets/images/slugs/pixel-bg.jpg'); /* Path to your background image */
+    background-image: url('path-to-your-image.jpg'); /* Path to your background image */
     background-size: cover; /* Ensures the background image covers the container */
     background-repeat: no-repeat; /* Prevents tiling */
     background-position: center; /* Centers the image */
     height: 100%; /* Matches the height of the parent container */
     width: 100%; /* Spans the full width of its flex space */
 }
 
+/* Page Title */
 .page-title {
     font-size: 1.8rem; /* Bold and large for emphasis */
     font-weight: bold;
     margin: 0;
     color: #ffffff; /* White for the title */
 }
 
+/* Page Subtitle */
 .page-subtitle {
     font-size: 1rem; /* Smaller subtitle text */
     margin-top: 5px;
     color: #ffffff; /* White for the subtitle */
 }
 
+/* Image Container */
 .image-container {
-    width: 100%; /* Full width for smaller screens */
-    height: auto; /* Adjust height dynamically */
-    margin: 0; /* Removes unwanted gaps */
-    padding: 0; /* Ensures no extra space inside the container */
-    overflow: hidden; /* Ensures no visual overflow */
+    flex-shrink: 0; /* Prevents the image container from shrinking */
+    width: 290px; /* Fixed width for consistency */
+    height: 160px; /* Fixed height to match the `.slug` */
+    overflow: hidden; /* Clips any overflowing content */
+    margin: 0; /* Ensures no gaps */
 }
 
+/* Image Styling */
 .image-container img {
-    display: block; /* Fixes inline spacing issues */
-    width: 100%; /* Scales the image to fit the container width */
-    height: auto; /* Maintains the aspect ratio of the image */
+    display: block; /* Eliminates inline-block spacing quirks */
+    width: 100%; /* Ensures the image fills the container width */
+    height: 100%; /* Matches the parent container height */
+    object-fit: cover; /* Ensures the image fills the container neatly */
     margin: 0; /* Removes default margins */
 }
 
+/* Responsive Design */
 @media (max-width: 768px) {
     .slug {
         flex-direction: column; /* Stacks items vertically on smaller screens */