Dropdown card

				.content {
    padding: 10px;
}
.title {
    cursor: pointer;
    padding: 10px 25px;
    border-radius: 5px;
    transition: border-radius ease-in-out 1s, background-color ease .5s;
}
.title:hover {
    border-radius: 0;
}
.box {
    background: rgb(241, 241, 241);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.288);
    border-radius: 5px;
    color: #353535;
    margin: 20px;
	width:300px;
}
@media (min-width:1024px) {
    /* dropdown */
    .box {
        box-shadow: none;
        border-radius: 0;
        background: #353535;
        color: #fff;
        height: 40px;
        width: 250px;
        overflow: hidden;
        max-height: 350px;
        transition: box-shadow ease-in 1s ,background-color ease-in .5s, border-radius ease-in-out 1s, height ease 1s;
    }
    .box:hover {
        background: rgb(241, 241, 241);
        border-radius: 5px;
        height: 250px;
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.288);
    }
    .box > .content {
        height: 0;
        transition: height ease-in-out 1s, opacity ease-in 1s;
        opacity: 0;
        color: #353535;
    }
    .box:hover>.content {
        height: fit-content;
        opacity: 1;
    }
    .box:hover>.title {
        color: #353535;
    }
    /* dropdown end */
}