/* CSS exclusivo para a seção de artigos */

.section-post-articles {
    display: flex;
    flex-wrap: wrap;
    gap: 15px; /* Espaçamento entre as caixas */
    margin-top: 20px; /* Espaçamento superior em relação ao conteúdo anterior */
    justify-content: flex-start; /* Alinha os quadrados à esquerda */
}

.section-post-articles .article-box {
    width: 100px; /* Largura fixa de 100px */
    height: 100px; /* Altura fixa de 100px */
    background-color: #f4f4f4; /* Cor de fundo das caixas */
    border: 1px solid #ccc; /* Borda das caixas */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra das caixas */
    border-radius: 5px; /* Bordas arredondadas */
    text-align: center; /* Centralizar o conteúdo dentro da caixa */
    box-sizing: border-box; /* Garantir que padding e borda não afetem o tamanho da caixa */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Esconde o conteúdo que ultrapassa o tamanho da caixa */
}

/* Estilo para o título dentro da caixa */
.section-post-articles .article-box h3 {
    font-size: 12px; /* Tamanho reduzido do texto para caber na caixa */
    margin: 0; /* Remove as margens padrão */
    color: #333;
}

/* Estilo para o texto dentro da caixa */
.section-post-articles .article-box p {
    font-size: 10px; /* Tamanho reduzido do texto para caber na caixa */
    color: #666;
    margin: 0; /* Remove as margens padrão */
    display: none; /* Esconde o parágrafo se não for necessário */
}

/* Responsivo: Adaptar as caixas para telas menores */
@media (max-width: 768px) {
    .section-post-articles {
        justify-content: center; /* Centraliza as caixas em telas menores */
    }
}