/* General Styles for Blog Post Cards */
.blog-listing__post {
  background-color: #fcfcfc;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
  margin-bottom: 24px;
}

.blog-listing__post:hover {
  transform: translateY(-5px); /* Subtle hover effect */
}

/* Image Styling */
.blog-listing__post-image {
  width: 100%;
  height: auto;
  display: block;
}

/* Content Padding */
.blog-listing__post-content {
  padding: 16px;
}

/* Tag Styling: Black, Regular, 12px */
.blog-listing__post-tag {
  font-size: 12px;
  font-weight: normal; /* Regular weight */
  color: #000; /* Black */
  text-transform: none;
  margin-bottom: 4px;
}

/* Title Styling: Bold */
.blog-listing__post-title {
  font-size: 20px;
  font-weight: bold !important; /* Force the title to be bold */
  margin: 8px 0;
  line-height: 1.4;
  color: #000 !important; /* Ensure the color stays black */
}

.blog-listing__post-title-link {
  text-decoration: none; /* No underline */
  color: inherit !important; /* Use the black color from parent */
  font-weight: inherit;
}

/* Timestamp Styling: Light Gray */
.blog-listing__post-timestamp {
  font-size: 14px;
  color: #888; /* Light gray */
  margin-top: 4px;
}

/* Grid Layout for 3 Columns */
.press-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 columns */
  gap: 24px; /* Space between cards */
}

/* Responsive Layout */
@media (max-width: 768px) {
  .press-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 columns on tablets */
  }
}

@media (max-width: 480px) {
  .press-grid {
    grid-template-columns: 1fr; /* 1 column on smaller screens */
  }
}

.blog-listing__post-timestamp {
    margin-bottom: 20px; // Adjust this value as needed to reduce the space
}
