/* Páginas de Postagens */
.blog-conteiner-cartoes {
    display   : flex;
    margin    : 40px 16px 40px 16px;
    column-gap: 40px;
}

.blog-cartao {
    width   : 33.33333%;
    overflow: hidden;
}

.blog-cartao>a {
    display        : block;
    color          : #000;
    text-decoration: none;
}

.blog-cartao-imagem {
    border-radius: 10px 10px 0 0;
    overflow     : hidden;
    aspect-ratio: 2 / 1;
    background-color: #ffdddd;
}

.blog-cartao-corpo {
    background-color: #ffeeee;
    border-radius   : 0 0 10px 10px;
    padding         : 20px;
}

.blog-cartao-corpo-conteudo {
    height: 150px;
}

.blog-cartao-titulo {
    margin   : 0 0 15px 0;
    margin   : 0;
    font-size: 1.2rem;
}

.blog-cartao-data,
.blog-cartao-destaque-data {
    margin    : 5px 0 0 0;
    font-size : 0.75rem;
    color     : #777777;
    font-style: italic;
}

.blog-cartao-texto {
    margin            : 15px 0 0 0;
    line-height       : 14px;
    height            : 54px;
    overflow          : hidden;
    display           : -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

.blog-cartao-destaque {
    display         : flex;
    align-items     : center;
    margin          : 35px 16px 0 16px;
    background-color: #ffeeee;
    border-radius   : 25px;
    padding         : 30px;
    column-gap      : 40px;
    color           : #000;
    text-decoration : none;
}

.blog-cartao-destaque:hover {
    text-decoration: none;
}

.blog-cartao-destaque-imagem,
.blog-cartao-destaque-corpo {
    width: 50%;
}

.blog-cartao-destaque-imagem {
    border-radius: 10px;
    overflow     : hidden;
}

.blog-cartao-destaque-titulo {
    margin   : 0;
    font-size: 1.5rem;
}

.blog-cartao-destaque-texto {
    margin: 25px 0 30px 0;
}


/* Página Conteúdo Postagem  */
.blog-conteiner-cabecalho,
.blog-conteiner-conteudo {
    display   : flex;
    margin    : 40px 16px 40px 16px;
    column-gap: 40px;
}

.blog-conteiner-cabecalho {
    align-items: flex-start;
}

.blog-postagem-titulo {
    flex-grow: 1;
}

.blog-postagem-titulo h1 {
    margin   : 0 0 5px 0;
    font-size: 1.5rem;
}

.blog-postagem-titulo span {
    font-size : 1rem;
    color     : #999999;
    font-style: italic;
}

.blog-postagem-conteudo {
    flex-grow: 1;
}

.blog-postagem-imagem {
    margin-bottom: 40px;
    border-radius: 20px;
    overflow     : hidden;
}

.blog-postagem-barra-nav {
    min-width       : 320px;
    max-width       : 320px;
    flex-basis      : 320px;
    background-color: #ffeeee;
    padding         : 20px;
    border-radius   : 20px;
}

.blog-postagem-barra-nav h2 {
    font-size : 1.35rem;
    margin-top: 0;
}

.blog-postagem-barra-nav p span {
    font-size : 0.75rem;
    font-style: italic;
    color     : #999999;
}

#blog-lista-postagens {
    width    : 320px;
    display  : flex;
    flex-flow: column wrap;
    overflow : hidden;
}

#blog-lista-postagens>p {
    margin: 7.5px 0;
}

#blog-lista-postagens>p:first-child {
    margin-top: 0;
}

.blog-botao span {
    display: inline-block;
}

.blog-conteiner-tags-categorias {
    margin: 40px 18px 40px 18px;
}

.blog-conteiner-tags-categorias h2 {
    margin-bottom: 5px;
}

/* Usamos a classe botão padrão do site e fazemos apenas pequenos ajustes através de uma classe específica */
.botao.blog {
    margin: 0 15px 15px 0;
}

#blog-conteiner-lista-postagens {
    overflow: hidden;
}