main{
    display: flex;
    flex-direction: column;
    align-items: center;
    height: auto;
    min-height: 400px;
}

.contBlogs{
    display: flex;
    flex-direction: column;
    align-items: center;
    height: auto;
    width: 90%;
    margin-bottom: 32px;

    .blogItem{
        cursor: pointer;
        position: relative;
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 100%;
        margin-top: 32px;
        border: 1px solid var(--azul_claro);
        border-radius: 4px;
        box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
        transition: all 0.2s ease-in-out;
        overflow: hidden;
        color: black;
        text-decoration: none;

        .blogImg{
            flex: 1;
            height: 300px;
            background-image: url(../Images/test.jpg);
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

        .blogContent{
            display: flex;
            flex-direction: column;
            padding: 16px;
            width: 80%;
            box-sizing: border-box;
            
            .blogText{
                width: 100%;
                margin-top: 16px;
                text-align: justify;
            }
    
            .blogTitle{
                font-size: 1.5rem;
                font-weight: 700;
                color: var(--azul_oscuro);
            }
    
            .blogDate{
                position: absolute;
                right: 20px;
                bottom: 10px;
                font-size: 0.9rem;
                color: var(--azul);
            }
        }
    }
}


.blogLink{
    position: relative;
    margin-top: 16px;
    font-size: 1.2rem;
    color: var(--azul_claro);
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    width: fit-content;
}

.blogItem:hover .blogLink{
    transform: translateY(-2px);
}

.blogLink::after{
    position: absolute;
    left: 0px;
    bottom: 0px;
    content: "";
    height: 1px;
    width: 0%;
    background-color: var(--azul_claro);
    transition: all 0.2s ease-in-out;
}

.blogItem:hover .blogLink::after{
    width: 100%;
}

@media(max-width:1000px){
    .contBlogs{
        .blogItem{
            .blogContent{
                width: 60%;
            }
        }
    }
}

@media(max-width:650px){
    .contBlogs{
        .blogItem{
            height: auto;
            flex-direction: column;
            .blogContent{
                width: 85%;
            }
            .blogImg{
                flex: unset;
                height: 200px;
                width: 100%;
            }
        }
    }
}