.corpo_blog{width:100%; height:auto; float:left; margin-bottom:10px; margin-top:20px;}

.titulo_ultimas_blog{font-size:20px; font-family:arial; color:#175ea8; text-transform:uppercase; text-align:center;  margin-top:20px; margin-bottom:15px;}

#blog-posts {
    display: flex; /* Transforma o container em um flex container */
    flex-wrap: wrap; /* Permite que os itens quebrem para a próxima linha */
    justify-content: space-between; /* Distribui o espaço uniformemente entre os itens */
    gap: 5px; /* Cria um espaço (espaço entre os itens) de 20px */
    margin-left:10px; 
    margin-right:10px;
}

/* Estilo para cada postagem individual */
.blog-post-item {
    width: calc(33.333% - 20px); /* Para exibir 3 posts por linha, com espaço de 20px */
    border: 1px solid #ccc;
    padding: 15px;
    box-sizing: border-box; /* Garante que padding e borda não aumentem o tamanho total do elemento */
    border-radius: 8px;
    background-color: #f9f9f9;
}

/* Estilo para o container da imagem */
.thumbnail-container {
    width: 100%; /* Faz o container da imagem preencher a largura do blog-post-item */
    height: 250px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    border-radius: 8px;
}

/* Estilo para a imagem */
.post-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Media Queries para responsividade */
/* Para telas menores que 768px (tablets) */
@media (max-width: 768px) {
    .blog-post-item {
        width: calc(50% - 10px); /* Exibe 2 posts por linha */
    }
}

/* Para telas menores que 480px (celulares) */
@media (max-width: 480px) {
    .blog-post-item {
        width: 100%; /* Exibe 1 post por linha */
    }
}