Update appearance of Most Viewed Posts plugin to match desired layout

[aref-asadi]

Currently, our homepage layout is as shown below:

The desired layout which displays recent posts in card format, is shown on the right side of the image. The issue we are encountering is with the most viewed posts section displayed using the plugin on the left side of the image, where we want the appearance to match the style of the card layout on the right side of the image.

Most Viewed Posts plugin codes

Shortcode CSS class: mv-card

Current CSS:

.mv-card {
  display: flex;
  justify-content: space-between;
  width: 300px; /* Adjust width as needed */
  height: 200px; /* Adjust height as needed */
  background-color: #333; /* Dark background */
  color: #fff; /* Light text */
  position: relative; /* For absolute positioning of content */
}

.post-view-image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensure image covers entire card */
}

.post-view-title {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
}

.post-view-title {
  margin: 0;
}

.post-view-meta {
  font-size: 12px;
  opacity: 0.7; /* Slightly dimmed author text */
}

[aref-asadi]

We decided to implement our website with code instead of using WordPress.