.Document_card{
    @include Flex; flex-direction: column;
    width: 400px;
    transition: ease-in-out .4s;
    cursor: pointer;
    .image_container{
        width: 100%;
        min-height:200px ;
        @include Flex;
        text-align: center;
        border: 2px solid var(--primary) ;
        border-radius: 25px;
        img{
            width: 100%;
        }
    }
    h1{
        transition: ease-in-out .4s;
        padding-top: 10px;
        font-size: 20px;
        font-weight: bold;
    }
    p{
        transition: ease-in-out .4s;
        font-size: 16px;
        font-weight: bold;
    }
    &:hover{
        transform: translateY(-30px);
        h1,p{
            color: var(--secondary);
        }
    }
}

@media screen and (max-width:900px) {
    .Document_card{
        width: 250px;
    }
}
