.conhecimento-experiencia{
background: linear-gradient(180deg, #736E6E 0%, #0D0D0D 100%);
box-shadow: inset 0px -20px 20px -16px #FFFFFF; 
}
.conhecimento-experiencia .content{
height: 662px; 
}
.conhecimento-experiencia img{
position: absolute;
right: 0;
bottom: 0;
}
.grid-blog{
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: 20px;
    justify-content: space-between;

}
.post{
    height: 500px; 
    max-width: 390px;
    min-width: 300px;
    background: linear-gradient(180deg, #7A787E 0%, #000000 100%);
    box-shadow: 10px 10px 10px #625953, inset 2px 4px 1px rgba(255, 255, 255, 0.25);
    border-radius: 10px;
    position: relative;
    color: white;
    overflow: hidden;
}
.post:hover img{
    transform: scale(1.2);
}
.post figure{
    width: 100%;
    height: 260px;
    overflow: hidden;
}
.post figure img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .2s linear;
}
.post h3{position: relative;}
.post h3::after{
    content: '';
    width: 80px;
    display: block;
    position: absolute;
    height: 5px;
    background: white;
}
.post .content{
    display: flex;
    flex-direction: column;
    padding: 0 10px 10px 10px;
    gap: 10px;
}
.post .barra-bottom{
    height: 5px;
    background-color: white;
    position: absolute;
    bottom: 0;
    width: 100%;
} 
.category{
    width: 100%; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px; 
    background: #F0EAFB;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), inset 4px 4px 4px rgba(255, 255, 255, 0.26);
    border-radius: 30px; 
    text-decoration: none;
    color: var(--color-violet-dark);
} 
@media screen and (max-width: 1050px) {
.conhecimento-experiencia {
    overflow: hidden;
}
.conhecimento-experiencia img {
    position: relative; 
    width: 100%;
    height: auto;
    object-fit: contain;
}
}
@media screen and (max-width: 1000px) {
.grid-blog{ 
    grid-template-columns: repeat(2, auto); 
}
}
@media screen and (max-width: 800px) {
.grid-blog{ 
    grid-template-columns: repeat(1, auto);
    justify-content: center;

}
.conhecimento-experiencia  {
    overflow: initial;
    height: auto;  
}
.conhecimento-experiencia .container div:has(img) {
order: 1;
}
.conhecimento-experiencia .container div:not(:has(img)) {
order: 2;
height: fit-content;
}
.conhecimento-experiencia .content {
    height: fit-content;
    padding-bottom: 20%;
}
}
@media screen and (max-width: 500px) {
.conhecimento-experiencia img {
    width: 100%; 
}
}