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

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

.list-card-teachers{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 25px;

    article {
        display: grid;
        height: 100%;
        grid-template-rows: auto 1fr;
        background: var(--wp--preset--color--primary);
        border: 1px solid var(--wp--preset--color--quinary);
        border-radius: 16px;
        gap: 5px;
        overflow: hidden;

        & figure{
            position: relative;
            margin: 0;
            
            & img{
                height: 100%;
                object-fit: cover;
                width: 100%;
                padding-top: 20px;
            }

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

        & div{
            display: grid;
            grid-template-rows: auto 1fr auto;
            gap: var(--wp--preset--spacing--s);
            padding: 0 var(--wp--preset--spacing--xl) var(--wp--preset--spacing--xl);

            & header {
                display: grid;

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

            & ul{
                display: grid;
                gap: 5px;
                align-content: start;
                margin: 0;
                padding-left: 18px;
                color: var(--wp--preset--color--text-secondary);
            }

            & footer{
                display: grid;
                grid-template-columns: 1fr auto;
                align-items: center;
                border-top: 1px solid var(--wp--preset--color--quinary);
                padding-top: var(--wp--preset--spacing--xl);

                & span{
                    color: var(--wp--preset--color--text-primary);
                }

                & 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;
                        justify-content: center;
                        align-content: center;
                        background: var(--wp--preset--color--primary);
                        stroke: var(--wp--preset--color--secondary);
                    }
                }
            }
        }
    }
}

@media screen and (max-width: 900px){
    .list-card-teachers{
        grid-template-columns: 1fr;

        & article{
            grid-template-columns:1fr;
        }
    }
}