.site-header {
    background-color: #000000;
    color: #ffffff;
    padding: 20px 0;
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-family: 'Montserrat', sans-serif;
}
.site-logo {
    font-weight: 700;
    font-size: 1.5rem;
}
/* The Grid Container */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    padding: 40px;
    max-width: 1200px;
}

/* Individual Card */
.blog-card {
    background: #222;
    border: 1px solid #333;
    border-radius: 8px;
    overflow: hidden; /* Clips the image corners */
    transition: transform 0.2s;
}

.blog-card:hover {
    transform: translateY(-5px); /* Lift effect on hover */
}

.blog-card img {
    width: 100%;
    /* Use aspect-ratio instead of a fixed pixel height */
    aspect-ratio: 16 / 9; 
    object-fit: cover;
    /* Optional: Improves rendering on high-DPI screens */
    image-rendering: -webkit-optimize-contrast; 
    display: block;
}

.blog-info {
    padding: 15px;
    text-align: left;
}

.blog-info h3 { margin: 0 0 10px 0; color: #00ffcc; }
.blog-info p { font-size: 0.9em; color: #ccc; }
.blog-info a { color: #fff; font-weight: bold; text-decoration: none; }