<!--
    Component informations:
    - id: LBP
    - name: LeaderBoard Prizes
-->
<section class="component-LBP" id="prizes">
    <div class="component-LBP-container component-LBP-podium">
        <picture class="component-LBP-podium-background">
            <source media="(min-width: 1025px)" srcset="img/components/LBP/background-desktop.jpg">
            <source media="(min-width: 768px)" srcset="img/components/LBP/background-desktop.jpg">
            <source media="(max-width: 480px)" srcset="img/components/LBP/background-mobile.jpg">
            <img src="img/components/LBP/background-mobile.jpg" alt="">
        </picture>
        <div class="component-LBP-content">
            <div class="component-LBP-podium-content">
                <div class="component-LBP-podium-text">
                    <div class="component-LBP-podium-title">
                        LES 3 PREMIERS DU CLASSEMENT HEBDOMADAIRE<br>
                        GAGNENT UN COFFRE EN OR.
                    </div>
                    <div class="component-LBP-podium-description">Il permet d'avoir à coup sûr un lot parmi les 5 lots suivants :</div>
                </div>
                <div class="component-LBP-podium-prizes">
                    <div class="component-LBP-podium-prizes-list">
                        <div class="component-LBP-podium-prize component-LBP-podium-prize--big">
                            <picture class="component-LBP-podium-prize-picture">
                                <source media="(min-width: 1025px)" srcset="img/components/LBP/prize-big.png">
                                <source media="(min-width: 768px)" srcset="img/components/LBP/prize-big.png">
                                <source media="(max-width: 480px)" srcset="img/components/LBP/prize-big.png">
                                <img src="img/components/LBP/prize-big.png" alt="">
                            </picture>
                            <div class="component-LBP-podium-prize-description">
                                LOREM IPSUM DOLOR SIT AMET,
                                CONSECTETUR ADIPISICING ELIT.
                                COMMODI CONSECTETUR CUMQUE DICTA.
                            </div>
                        </div>
                        <div class="component-LBP-podium-prize component-LBP-podium-prize--medium">
                            <picture class="component-LBP-podium-prize-picture">
                                <source media="(min-width: 1025px)" srcset="img/components/LBP/prize-medium.png">
                                <source media="(min-width: 768px)" srcset="img/components/LBP/prize-medium.png">
                                <source media="(max-width: 480px)" srcset="img/components/LBP/prize-medium.png">
                                <img src="img/components/LBP/prize-medium.png" alt="">
                            </picture>
                            <div class="component-LBP-podium-prize-description">
                                LOREM IPSUM DOLOR SIT AMET,
                                CONSECTETUR ADIPISICING ELIT.
                                COMMODI CONSECTETUR CUMQUE DICTA.
                            </div>
                        </div>
                        <div class="component-LBP-podium-prizes-sublist">
                            <div class="component-LBP-podium-prize component-LBP-podium-prize--small">
                                <div class="component-LBP-podium-prize-description">LOREM IPSUM DOLOR SIT AMET</div>
                            </div>
                            <div class="component-LBP-podium-prize component-LBP-podium-prize--small">
                                <div class="component-LBP-podium-prize-description">LOREM IPSUM DOLOR SIT AMET</div>
                            </div>
                            <div class="component-LBP-podium-prize component-LBP-podium-prize--small">
                                <div class="component-LBP-podium-prize-description">LOREM IPSUM DOLOR SIT AMET</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="component-LBP-container">
        <div class="component-LBP-content">
            <div class="component-LBP-subtitle">
                LOREM IPSUM DOLOR SIT AMET
            </div>
            <div class="component-LBP-grid">
                <div class="component-LBP-grid-item">
                    <div class="component-LBP-grid-item-content">
                        <div class="component-LBP-grid-item-text">
                            <div class="component-LBP-grid-item-text-number">6</div>
                            <div class="component-LBP-grid-item-text-title">2000 DIAMANTS</div>
                        </div>
                        <picture class="component-LBP-grid-item-picture">
                            <source media="(min-width: 1025px)" srcset="img/components/LBP/diamond-desktop.png">
                            <source media="(min-width: 481px)" srcset="img/components/LBP/diamond-desktop.png">
                            <source media="(max-width: 480px)" srcset="img/components/LBP/diamond-mobile.png">
                            <img src="img/components/LBP/diamond-mobile.png" alt="">
                        </picture>
                    </div>
                </div>
                <div class="component-LBP-grid-item">
                    <div class="component-LBP-grid-item-content">
                        <div class="component-LBP-grid-item-text">
                            <div class="component-LBP-grid-item-text-number">7</div>
                            <div class="component-LBP-grid-item-text-title">1800 DIAMANTS</div>
                        </div>
                        <picture class="component-LBP-grid-item-picture">
                            <source media="(min-width: 1025px)" srcset="img/components/LBP/diamond-desktop.png">
                            <source media="(min-width: 481px)" srcset="img/components/LBP/diamond-desktop.png">
                            <source media="(max-width: 480px)" srcset="img/components/LBP/diamond-mobile.png">
                            <img src="img/components/LBP/diamond-mobile.png" alt="">
                        </picture>
                    </div>
                </div>
                <div class="component-LBP-grid-item">
                    <div class="component-LBP-grid-item-content">
                        <div class="component-LBP-grid-item-text">
                            <div class="component-LBP-grid-item-text-number">8</div>
                            <div class="component-LBP-grid-item-text-title">1600 DIAMANTS</div>
                        </div>
                        <picture class="component-LBP-grid-item-picture">
                            <source media="(min-width: 1025px)" srcset="img/components/LBP/diamond-desktop.png">
                            <source media="(min-width: 481px)" srcset="img/components/LBP/diamond-desktop.png">
                            <source media="(max-width: 480px)" srcset="img/components/LBP/diamond-mobile.png">
                            <img src="img/components/LBP/diamond-mobile.png" alt="">
                        </picture>
                    </div>
                </div>
                <div class="component-LBP-grid-item">
                    <div class="component-LBP-grid-item-content">
                        <div class="component-LBP-grid-item-text">
                            <div class="component-LBP-grid-item-text-number">9</div>
                            <div class="component-LBP-grid-item-text-title">1400 DIAMANTS</div>
                        </div>
                        <picture class="component-LBP-grid-item-picture">
                            <source media="(min-width: 1025px)" srcset="img/components/LBP/diamond-desktop.png">
                            <source media="(min-width: 481px)" srcset="img/components/LBP/diamond-desktop.png">
                            <source media="(max-width: 480px)" srcset="img/components/LBP/diamond-mobile.png">
                            <img src="img/components/LBP/diamond-mobile.png" alt="">
                        </picture>
                    </div>
                </div>
                <div class="component-LBP-grid-item">
                    <div class="component-LBP-grid-item-content">
                        <div class="component-LBP-grid-item-text">
                            <div class="component-LBP-grid-item-text-number">10</div>
                            <div class="component-LBP-grid-item-text-title">1200 DIAMANTS</div>
                        </div>
                        <picture class="component-LBP-grid-item-picture">
                            <source media="(min-width: 1025px)" srcset="img/components/LBP/diamond-desktop.png">
                            <source media="(min-width: 481px)" srcset="img/components/LBP/diamond-desktop.png">
                            <source media="(max-width: 480px)" srcset="img/components/LBP/diamond-mobile.png">
                            <img src="img/components/LBP/diamond-mobile.png" alt="">
                        </picture>
                    </div>
                </div>
                <div class="component-LBP-grid-item">
                    <div class="component-LBP-grid-item-content">
                        <div class="component-LBP-grid-item-text">
                            <div class="component-LBP-grid-item-text-number">11</div>
                            <div class="component-LBP-grid-item-text-title">1000 DIAMANTS</div>
                        </div>
                        <picture class="component-LBP-grid-item-picture">
                            <source media="(min-width: 1025px)" srcset="img/components/LBP/diamond-desktop.png">
                            <source media="(min-width: 481px)" srcset="img/components/LBP/diamond-desktop.png">
                            <source media="(max-width: 480px)" srcset="img/components/LBP/diamond-mobile.png">
                            <img src="img/components/LBP/diamond-mobile.png" alt="">
                        </picture>
                    </div>
                </div>
                <div class="component-LBP-grid-item">
                    <div class="component-LBP-grid-item-content">
                        <div class="component-LBP-grid-item-text">
                            <div class="component-LBP-grid-item-text-number">12</div>
                            <div class="component-LBP-grid-item-text-title">800 DIAMANTS</div>
                        </div>
                        <picture class="component-LBP-grid-item-picture">
                            <source media="(min-width: 1025px)" srcset="img/components/LBP/diamond-desktop.png">
                            <source media="(min-width: 481px)" srcset="img/components/LBP/diamond-desktop.png">
                            <source media="(max-width: 480px)" srcset="img/components/LBP/diamond-mobile.png">
                            <img src="img/components/LBP/diamond-mobile.png" alt="">
                        </picture>
                    </div>
                </div>
                <div class="component-LBP-grid-item">
                    <div class="component-LBP-grid-item-content">
                        <div class="component-LBP-grid-item-text">
                            <div class="component-LBP-grid-item-text-number">13</div>
                            <div class="component-LBP-grid-item-text-title">700 DIAMANTS</div>
                        </div>
                        <picture class="component-LBP-grid-item-picture">
                            <source media="(min-width: 1025px)" srcset="img/components/LBP/diamond-desktop.png">
                            <source media="(min-width: 481px)" srcset="img/components/LBP/diamond-desktop.png">
                            <source media="(max-width: 480px)" srcset="img/components/LBP/diamond-mobile.png">
                            <img src="img/components/LBP/diamond-mobile.png" alt="">
                        </picture>
                    </div>
                </div>
                <div class="component-LBP-grid-item">
                    <div class="component-LBP-grid-item-content">
                        <div class="component-LBP-grid-item-text">
                            <div class="component-LBP-grid-item-text-number">14</div>
                            <div class="component-LBP-grid-item-text-title">500 DIAMANTS</div>
                        </div>
                        <picture class="component-LBP-grid-item-picture">
                            <source media="(min-width: 1025px)" srcset="img/components/LBP/diamond-desktop.png">
                            <source media="(min-width: 481px)" srcset="img/components/LBP/diamond-desktop.png">
                            <source media="(max-width: 480px)" srcset="img/components/LBP/diamond-mobile.png">
                            <img src="img/components/LBP/diamond-mobile.png" alt="">
                        </picture>
                    </div>
                </div>
                <div class="component-LBP-grid-item">
                    <div class="component-LBP-grid-item-content">
                        <div class="component-LBP-grid-item-text">
                            <div class="component-LBP-grid-item-text-number">15</div>
                            <div class="component-LBP-grid-item-text-title">500 DIAMANTS</div>
                        </div>
                        <picture class="component-LBP-grid-item-picture">
                            <source media="(min-width: 1025px)" srcset="img/components/LBP/diamond-desktop.png">
                            <source media="(min-width: 481px)" srcset="img/components/LBP/diamond-desktop.png">
                            <source media="(max-width: 480px)" srcset="img/components/LBP/diamond-mobile.png">
                            <img src="img/components/LBP/diamond-mobile.png" alt="">
                        </picture>
                    </div>
                </div>
                <div class="component-LBP-grid-item">
                    <div class="component-LBP-grid-item-content">
                        <div class="component-LBP-grid-item-text">
                            <div class="component-LBP-grid-item-text-number">16</div>
                            <div class="component-LBP-grid-item-text-title">500 DIAMANTS</div>
                        </div>
                        <picture class="component-LBP-grid-item-picture">
                            <source media="(min-width: 1025px)" srcset="img/components/LBP/diamond-desktop.png">
                            <source media="(min-width: 481px)" srcset="img/components/LBP/diamond-desktop.png">
                            <source media="(max-width: 480px)" srcset="img/components/LBP/diamond-mobile.png">
                            <img src="img/components/LBP/diamond-mobile.png" alt="">
                        </picture>
                    </div>
                </div>
                <div class="component-LBP-grid-item">
                    <div class="component-LBP-grid-item-content">
                        <div class="component-LBP-grid-item-text">
                            <div class="component-LBP-grid-item-text-number">17</div>
                            <div class="component-LBP-grid-item-text-title">500 DIAMANTS</div>
                        </div>
                        <picture class="component-LBP-grid-item-picture">
                            <source media="(min-width: 1025px)" srcset="img/components/LBP/diamond-desktop.png">
                            <source media="(min-width: 481px)" srcset="img/components/LBP/diamond-desktop.png">
                            <source media="(max-width: 480px)" srcset="img/components/LBP/diamond-mobile.png">
                            <img src="img/components/LBP/diamond-mobile.png" alt="">
                        </picture>
                    </div>
                </div>
                <div class="component-LBP-grid-item">
                    <div class="component-LBP-grid-item-content">
                        <div class="component-LBP-grid-item-text">
                            <div class="component-LBP-grid-item-text-number">18</div>
                            <div class="component-LBP-grid-item-text-title">500 DIAMANTS</div>
                        </div>
                        <picture class="component-LBP-grid-item-picture">
                            <source media="(min-width: 1025px)" srcset="img/components/LBP/diamond-desktop.png">
                            <source media="(min-width: 481px)" srcset="img/components/LBP/diamond-desktop.png">
                            <source media="(max-width: 480px)" srcset="img/components/LBP/diamond-mobile.png">
                            <img src="img/components/LBP/diamond-mobile.png" alt="">
                        </picture>
                    </div>
                </div>
                <div class="component-LBP-grid-item">
                    <div class="component-LBP-grid-item-content">
                        <div class="component-LBP-grid-item-text">
                            <div class="component-LBP-grid-item-text-number">19</div>
                            <div class="component-LBP-grid-item-text-title">500 DIAMANTS</div>
                        </div>
                        <picture class="component-LBP-grid-item-picture">
                            <source media="(min-width: 1025px)" srcset="img/components/LBP/diamond-desktop.png">
                            <source media="(min-width: 481px)" srcset="img/components/LBP/diamond-desktop.png">
                            <source media="(max-width: 480px)" srcset="img/components/LBP/diamond-mobile.png">
                            <img src="img/components/LBP/diamond-mobile.png" alt="">
                        </picture>
                    </div>
                </div>
                <div class="component-LBP-grid-item">
                    <div class="component-LBP-grid-item-content">
                        <div class="component-LBP-grid-item-text">
                            <div class="component-LBP-grid-item-text-number">20</div>
                            <div class="component-LBP-grid-item-text-title">500 DIAMANTS</div>
                        </div>
                        <picture class="component-LBP-grid-item-picture">
                            <source media="(min-width: 1025px)" srcset="img/components/LBP/diamond-desktop.png">
                            <source media="(min-width: 481px)" srcset="img/components/LBP/diamond-desktop.png">
                            <source media="(max-width: 480px)" srcset="img/components/LBP/diamond-mobile.png">
                            <img src="img/components/LBP/diamond-mobile.png" alt="">
                        </picture>
                    </div>
                </div>
            </div>
            <div class="component-LBP-text">
                * Dotations réservées aux personnes majeurs et non interdites
                de jeu, membres du programme de fidélité Carré VIP Barrière dans
                l'un des casinos participants. Voir les conditions générales
                d'utilisations <a href="https://www.casinosbarriere.com/content/dam/casinos/barriere-pocket-casino/cgu-barriere-pocket-casino.pdf">ici</a>.
            </div>
        </div>
    </div>
</section>