.blog-container {
  margin: auto 200px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  padding: 40px;
}

@media screen and (max-width: 768px) {
  .blog-container {
    margin: auto 20px;
    grid-template-columns: 1fr;
    padding: 20px;
  }
}

.blog-card {
  transition: transform 0.3s ease;
}

.blog-card:hover {
  transform: translateY(-5px);
}

.blog-title {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}

.blog-content {
  font-size: 16px;
  color: #666;
}

/* --- Basic Card Styling (Optional, adjust as needed) --- */
.blog-card-home {
  box-sizing: border-box; /* Include padding and border in element's total width/height */
  margin: 0 10px; /* Add spacing between cards */
  padding-bottom: 15px; /* Space below content */
  overflow: hidden; /* Hide overflowing content if needed */
  cursor: pointer; /* Indicate it's clickable */
}

.blog-card-home {
  transform: scale(1);
  transition: transform 0.3s ease;
}

.blog-card-home:hover {
  transform: scale(1.05);
}

.blog-card-home img {
  max-width: 100%;
  height: auto; /* Maintain aspect ratio */
  display: block; /* Remove extra space below image */
}

.blog-card-home .blog-title {
  font-size: 1.2em;
  font-weight: bold;
  margin: 10px 5px 5px 5px;
  color: #333;
}

.blog-card-home .blog-content {
  font-size: 0.9em;
  color: #666;
  margin: 5px 5px;
  line-height: 1.4;
}

/* --- Slider Specific Styles --- */
.blog-slider-container {
  position: relative; /* Needed for absolute positioning of buttons */
  max-width: 1600px; /* Optional: Limit max width */
  margin: 20px auto; /* Center the container */
  padding: 0 80px; /* Space for the buttons */
  box-sizing: border-box;
}

.blog-slider-wrapper {
  overflow: hidden; /* Crucial: Hides the parts of the slider not in view */
  width: 100%;
}

.blog-slider {
  display: flex; /* Arrange blog cards in a row */
  flex-wrap: nowrap; /* Prevent wrapping to the next line */
  transition: transform 0.5s ease-in-out; /* Smooth sliding animation */
  margin: 0 -10px; /* Counteract the card margin for edge alignment */
}

/* --- Responsiveness --- */

/* Default: Mobile - 1 slide visible */
.blog-card-home {
  width: calc(100% - 20px); /* Full width minus margins */
  flex-shrink: 0; /* Prevent items from shrinking */
}

/* Tablet: 768px and up - 2 slides visible */
@media (min-width: 768px) {
  .blog-card-home {
    width: calc(50% - 20px); /* Half width minus margins */
  }
}

/* Small Desktop: 1024px and up - 3 slides visible */
@media (min-width: 1024px) {
  .blog-card-home {
    width: calc(100% / 3 - 20px); /* One-third width minus margins */
  }
}

/* Large Desktop: 1440px and up - 4 slides visible */
@media (min-width: 1440px) {
  .blog-card-home {
    width: calc(25% - 20px); /* Quarter width minus margins */
  }
}

/* --- Slider Navigation Buttons --- */
.blog-slider-container .prev,
.blog-slider-container .next {
  position: absolute;
  top: 30%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 10px 15px;
  font-size: 20px;
  cursor: pointer;
  z-index: 10;
  border-radius: 50%;
  line-height: 1; /* Adjust for better vertical centering of arrow */
  transition: background-color 0.3s ease;
}

.blog-slider-container .prev:hover,
.blog-slider-container .next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.blog-slider-container .prev {
  left: 5px; /* Position left button */
}

.blog-slider-container .next {
  right: 5px; /* Position right button */
}

.blog-slider-container button:disabled {
  background-color: rgba(0, 0, 0, 0.2);
  cursor: not-allowed;
}