.postagem{
    background: #fff; 
    padding: 60px 10%; 
    color: #494645; 
        & p{
        font-size: 1.1rem;
        line-height: 1.7;
        margin: 20px 0;
        }
        & .destacada{
        & img{
            aspect-ratio: 16/9;
            object-fit: cover;
            width: 100%;
            height: auto;
            border-radius: 15px;
            margin: 0 0 15px;
        }
        }
        & h1.titulo{
            font-weight: 700;
            font-size: 2.5rem;
            line-height: 1.2;
            margin: 0;
        }
        & .data{
            display: block;
            margin: 5px 0;
            text-transform: uppercase;
            font-size: .8rem;
        }
        & strong{
           font-weight: 700;
        }
        & a{
            color: var(--laranja);
            text-decoration: underline;
        }
        & img{
            max-width: 100%;
            border-radius: 10px;
            margin: 15px auto;
            display: block;
            height: auto;
        }
        & h1, h2, h3, h4, h5, h6{
            color: #494645;
            font-weight: 700;
            margin: 15px 0 10px;
        }
        & ul, ol{
            list-style-position: inside;
            padding-left: 0;
            & li{
                margin: 8px 0;
            }
        }
        & blockquote{
            background: #f7f7f7; 
            padding: 30px 50px; 
            border-radius: 15px; 
            font-size: 1.2rem; 
            line-height: 1.5;
            font-weight: 600;
            & p{
                margin: 15px 0;
            }
            &::before {
                content: "";
                display: block;
                height: 10px;
                width: 100px;
                margin: -35px auto 30px;
                background: linear-gradient(to right, var(--verde) 0%, var(--verde) 33.33%, var(--laranja) 33.33%, var(--laranja) 66.66%, var(--azul) 66.66%, var(--azul) 100%);
                border-radius: 3px;
            }
            &::after {
                content: "";
                display: block;
                height: 10px;
                width: 100px;
                margin: 30px auto -35px;
                background: linear-gradient(to right, var(--verde) 0%, var(--verde) 33.33%, var(--laranja) 33.33%, var(--laranja) 66.66%, var(--azul) 66.66%, var(--azul) 100%);
                border-radius: 3px;
            }
        }

        .lateral{
            position: sticky;
            top: 160px;
            padding: 0px 30px;
            & h3{
                margin: 0 0 20px;
                font-size: 1.4rem;
                text-transform: uppercase;
                font-weight: 700;
                &::after {
                    content: "";
                    display: block;
                    height: 6px;
                    width: 70px;
                    margin: 6px 0 30px 0;
                    background: linear-gradient(to right, var(--verde) 0%, var(--verde) 33.33%, var(--laranja) 33.33%, var(--laranja) 66.66%, var(--azul) 66.66%, var(--azul) 100%);
                    border-radius: 3px;
                }
            }
            a{
                text-decoration: none;
            }
            .atualizacao{
                background: #fff;
                margin: 15px 0;
                border-radius: 15px;
                & img{
                    aspect-ratio: 16/9;
                    margin: 0;
                    width: 100%;
                    height: auto;
                    object-fit: cover;
                }
                & h4{
                    text-decoration: none;
                    font-size: 1.1rem;
                    margin: 0;
                    transition: .3s;
                }
                &:hover{
                    h4{
                        color: var(--azul);
                    }
                }
            }
        }

}


@media screen and (max-width: 1481px){
    .postagem{
        padding: 40px 40px;
        .lateral{
            padding: 0 0 0 30px;
            & .atualizacao {
                & h4 {
                    font-size: 1rem;
                }
            }
        }
    }
}


@media screen and (max-width: 1024px){
    .postagem {
        padding: 40px;
        & h1.titulo {
          font-size: 2rem;  
        }
        .lateral {
            padding: 30px 0 0 0;
            & .atualizacao {
                & h4 {
                    font-size: 1.3rem;
                }
            }
        }
    }
}

@media screen and (max-width: 480px){
    .postagem {
        padding: 0px;
        & .destacada {
            & img {
                border-radius: 0;
                margin: 0;
            }
        }
        & h1.titulo {
            font-size: 1.5rem;
        }
        & p{
            font-size: 1rem;
        }
        & blockquote {
            font-size: 1rem;
            padding: 30px;
            line-height: 1.5;

        }
        .conteudo {
            padding: 20px 30px 0;
        }
        & .lateral{
            padding: 10px 30px 30px;
        }
        & .lateral {
            & .atualizacao {
                & h4 {
                    font-size: 1.2rem;
                    margin-top: 10px;
                }
            }
        }
    }
}