.content {
    max-width: 1200px;   
    margin: 0 auto;      
    padding: 40px 20px;  
}

.blog-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 40px 20px;
}

.blog-post {
    background-color: #1a1a1a;
    padding: 20px;
    border-radius: 8px;
    transition: transform 0.2s;
}

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

.post-image { 
    width: 100%; 
    height: 150px; 
    object-fit: cover; 
    border-radius: 6px 6px 0 0; 
    margin-bottom: 12px; 
}

.post-title { 
    font-size: 1.2rem; 
    font-weight: 600; 
    margin-bottom: 10px; 
}

.post-date { 
    font-size: 0.85rem; 
    color: #888; 
    margin-bottom: 10px; 
}

.post-description { 
    font-size: 1rem; 
    color: #ccc; 
}

.read-more-btn {
    display: inline-block;
    margin-top: 10px;
    padding: 8px 16px;
    background-color: #ff6600;
    color: #fff;
    font-weight: 600;
    border-radius: 4px;
    text-decoration: none;
    transition: background-color 0.2s;
}

.read-more-btn:hover { 
    background-color: #e05500; 
}

@media (max-width: 1024px) { 
    .blog-container { 
        grid-template-columns: repeat(2, 1fr); 
    } 
}

@media (max-width: 640px) { 
    .blog-container { 
        grid-template-columns: 1fr; 
    } 
}