/* Container: Centers content and sets responsive full width */
.dpffm-medium-container {
  width: 100%;
  margin: 0 auto;
}

/* Row: Flexible wrapping layout with consistent spacing */
.dpffm-medium-row {
  display: flex;
  flex-wrap: wrap;
  gap: 15px; /* Adds spacing between items */
  align-items: stretch; /* Ensures items align to equal height */
}

/* Default styles for grid items (cards) */
.dpffm-medium-item {
  display: flex;
  flex-direction: column; /* Stacks image and text vertically */
  margin-bottom: 30px;
  background-color: #f9f9f9;
  border-radius: 10px;
}

/* Responsive grid sizes */
.dpffm-medium-flex-grid2 {
  width: calc(50% - 15px); /* Two items per row with gap */
}

.dpffm-medium-flex-grid3 {
  width: calc(33.33% - 15px); /* Three items per row with gap */
}

.dpffm-medium-flex-grid4 {
  width: calc(25% - 15px); /* Four items per row with gap */
}

/* Image container: Maintains consistent size and aspect ratio */
.medium-post-image {
  overflow: hidden;
  height: 300px; /* Fixed height for consistent display */
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  display: flex;
  align-items: center;
}

/* Image: Fully responsive within its container */
.dpffm-medium-img {
  max-width: 100%;
  height: auto;
  border-radius: 0; /* Avoids additional rounding */
  min-height: 100%;
}

/* Content box: Flexible vertical layout */
.medium-post-box {
  display: flex;
  flex-direction: column;
  flex: 1; /* Fills remaining vertical space */
  padding: 8px 25px 0 15px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

/* Title: Ensures prominence with clear spacing and size */
.dpffm-medium-title {
  margin: 15px 0;
  font-size: 1.2em;
  font-weight: bold;
}

/* Content area: Stretches to fill space before meta section */
.medium-post-content {
  flex: 1;
}

/* Read more link: Spaced for visual balance */
.display-medium-readmore {
  margin: 8px 0 10px;
  display: block;
  font-size: 12px;
}

/* Meta tags: Positioned at the bottom */
.medium-post-meta-tags {
  display: flex;
  justify-content: space-between;
  margin-top: auto;
}

/* Tablet breakpoint (<= 1024px): Two items per row */
@media (max-width: 1024px) {
  .dpffm-medium-flex-grid2,
  .dpffm-medium-flex-grid3,
  .dpffm-medium-flex-grid4 {
    width: calc(50% - 15px);
  }
}

/* Mobile breakpoint (<= 768px): One item per row */
@media (max-width: 768px) {
  .dpffm-medium-flex-grid2,
  .dpffm-medium-flex-grid3,
  .dpffm-medium-flex-grid4 {
    width: 100%;
  }
  
.medium-post-image {
  height: 200px; /* Fixed height for consistent display */
}
	
}