@import 'variables';
.search {
    display: flex;
    .filters {
        width: 300px;
    }
    .cardList {
        padding: 20px 0;

        flex: 1;
        .card {
            display: flex;
            overflow: hidden;

            border-radius: 2px;
            background: #fff;
            box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24);
            &:not(:last-child) {
                margin-bottom: 20px;
            }
            img {
                height: 200px;
            }
            .body {
                display: flex;
                flex-direction: column;

                max-height: 200px;

                flex: 1;
                .info {
                    display: flex;
                    overflow: hidden;
                    flex-direction: column;

                    padding: 16px 16px 0;

                    flex: 1;
                    .title {
                        font-size: 25px;

                        color: $pink;
                    }
                    .synopsis {
                    	overflow: hidden;
                        display: -webkit-box;

                        padding: 16px 0 0 0;

                        color: rgba(0,0,0,.52);

                        -webkit-line-clamp: 3;
                        -webkit-box-orient: vertical;
                        margin-bottom: 16px;
                    }
                }
                .action {
                    padding: 16px;

                    border-top: 1px rgba(0,0,0,.12) solid;
                    button {
                        font-size: 16px;

                        color: #448aff;
                        border: none;
                        background: none;

                        outline: none;
                    }
                }
            }
        }
    }
}