Test

/* Grid layout */

.blog-grid {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

gap: 24px;

}

/* Card base */

.blog-card {

display: flex;

flex-direction: column;

background: #ffffff;

border-radius: 14px;

overflow: hidden;

text-decoration: none;

color: #1f2937;

box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);

transition: transform 0.25s ease, box-shadow 0.25s ease;

}

/* Hover effect */

.blog-card:hover {

transform: translateY(-6px);

box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);

}

/* Image wrapper */

.blog-image {

position: relative;

overflow: hidden;

height: 190px;

}

/* Image styling */

.blog-image img {

width: 100%;

height: 100%;

object-fit: cover;

transition: transform 0.4s ease;

}

/* Image zoom on hover */

.blog-card:hover img {

transform: scale(1.05);

}

/* Content area */

.blog-content {

padding: 18px 20px 22px;

}

/* Title */

.blog-content h3 {

font-size: 1.1rem;

font-weight: 600;

margin-bottom: 8px;

line-height: 1.4;

}

/* Excerpt */

.blog-content p {

font-size: 0.95rem;

color: #6b7280;

line-height: 1.5;

margin-bottom: 14px;

}

/* Read more CTA */

.read-more {

font-size: 0.9rem;

font-weight: 600;

color: #2563eb;

}