 screens ------------------------------------------------------------------------>
<div class="small-screen">
    <div id="demo" class="carousel slide" data-ride="carousel">
        <!------------------------------------- carousel first row -------------------------->
        <div class=" carousel-inner " class="ml-auto">
            <div class="card-deck">
                <div class="carousel-item active">
                    {% for book in book|slice:":50"%}
                    <div class="card col-sm-12 