.link-card-post{
    text-decoration: none;

    &:hover .title{
        transition: 0.3s;
        color: var(--wp--preset--color--secondary);
    }
}

.lienzo-card-post {
    display: grid;
    gap: 15px;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    align-items: start;
    height: 100%;
    background: var(--wp--preset--color--primary);
    box-shadow: var(--shadow);
    border: 1px solid var(--wp--preset--color--quinary);
    border-radius: 20px;
    overflow: hidden;

    & header {
        display: grid;
        gap: 15px;
        grid-template-rows: 1fr auto;
        align-items: start;

        & figure{
            display: grid;
            /*height: 350px;*/
            overflow: hidden;
            margin: 0;
            position: relative;
    
            & img{
                height: 100%;
                object-fit: cover;
                width: 100%;
            }

            &::after{
                content: "";
                position: absolute;
                background: rgb(3,9,21);
                left: 0;
                right: 0;
                height: 50px;
                background: linear-gradient(0deg, var(--wp--preset--color--primary) 0%, rgba(255,255,255,0) 100%);
                bottom: 0;
            }
        }

        & > section{
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 10px;
            padding: 0 25px;
            font-size: var(--wp--preset--font-size--medium);

            & .t-autor {
                display: flex;
                align-items: center;
                gap: 5px;
                color: var(--wp--preset--color--text-primary);

                & .avatar{
                    width: 45px;
                    height: 45px;
                    margin-bottom: -2.5px;
                    border-radius: 50%;
                    border: 1px solid var(--wp--preset--color--secondary);
                }
                
                & > div{
                    display: grid;
                }
            }

            & > .fecha-cat{
                display: grid;
                color: var(--wp--preset--color--text-secondary);

                & .t-categoria {
                    display: flex;
                    justify-content: right;
                    gap: 3px;
                }
            }
        }

        & .title{
            margin: 0;
            font-size: var(--wp--preset--font-size--x-large);
            padding: 0 25px;
            color: var(--wp--preset--color--text-primary);
        }
    }

    & .extracto {
        margin: 0;
        padding: 0 25px;
        font-size: var(--wp--preset--font-size--normal);
        color: var(--wp--preset--color--text-secondary);
    }

    & footer{
        display: grid;
        align-items: center;
        grid-template-columns: 1fr auto;
        margin: 0 25px;
        padding: 25px 0;
        gap: 5px;
        border-top: 1px solid var(--wp--preset--color--quinary);
        color: var(--wp--preset--color--text-secondary);

        & div{
            display: flex;
            align-items: center;
            overflow: hidden;
            position: relative;
            padding: 10px;
            border-radius: 50%;
            border: 1px solid var(--wp--preset--color--secondary);
            background: var(--wp--preset--color--primary);
            
            & svg{
                border-radius: 50%;
                width: 30px;
                height: 30px;
                display: grid;
                transition: all 0.6s ease;
                justify-content: center;
                align-content: center;
                background: var(--wp--preset--color--primary);
                stroke: var(--wp--preset--color--secondary);
            }
        }
    }
}

@media screen and (max-width: 600px){
    .lienzo-card-post header section{
        grid-template-columns: 1fr;

        & .fecha-cat .t-categoria{
            justify-content: left;
        }
    }
}