.blog-item {
    display: flex;
    flex-direction: column;
    height: auto; /* Change from 100% to auto to prevent expansion issues */
}

.blog-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.blog-details {
    max-height: 0;
    overflow: hidden;
    opacity: 0; /* Hides content properly */
    transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out;
}

.blog-item.expanded .blog-details {
    max-height: 500px; /* Adjust based on content size */
    opacity: 1;
}