<section class="why-play-streaks">
    <header class="header d-md-none"><h2>WHY PLAY STREAKS?</h2></header>
    <div class="text-carousel d-none d-md-block">
        <div class="animation-text">
            <span>WHY PLAY STREAKS?</span><img src="img/layout/logo.svg" alt="logo" class="logo">
            <span>WHY PLAY STREAKS?</span><img src="img/layout/logo.svg" alt="logo" class="logo">
            <span>WHY PLAY STREAKS?</span><img src="img/layout/logo.svg" alt="logo" class="logo">
            <span>WHY PLAY STREAKS?</span><img src="img/layout/logo.svg" alt="logo" class="logo">
            <span>WHY PLAY STREAKS?</span><img src="img/layout/logo.svg" alt="logo" class="logo">
            <span>WHY PLAY STREAKS?</span><img src="img/layout/logo.svg" alt="logo" class="logo">
        </div>
    </div>
    <div class="content">
        <div class="line line-1">
            <div class="column col1 d-none d-xxl-block">
                <div class="block block1"></div>
                <div class="block block2"></div>
                <div class="block block3"></div>
            </div>
            <div class="column col2 d-none d-lg-block">
                <div class="block block1"><img src="img/layout/block-circle.svg" alt=""></div>
                <div class="block block2"></div>
                <div class="block block3"></div>
            </div>
            <article class="topic">
                <div class="image"><img src="img/layout/free.svg" alt="100% FREE"></div>
                <div class="text">
                    <header><h3>100% FREE</h3></header>
                    <p>Free entry. <br class="mobile">
                    No deposit required.</p>
                </div>
            </article>
            <div class="column col3 d-none d-md-block">
                <div class="block block1"></div>
                <div class="block block2"><img src="img/layout/arrow-left.svg" alt=""></div>
                <div class="block block3"></div>
            </div>
            <div class="column col4 d-none d-md-block">
                <div class="block block1"></div>
                <div class="block block2"><img src="img/layout/arrow-left.svg" alt=""></div>
                <div class="block block3"></div>
            </div>
            <div class="column col5 d-none d-xl-block">
                <div class="block block1"><img src="img/layout/block-dots1.svg" alt=""></div>
                <div class="block block2"><img src="img/layout/arrow-left.svg" alt=""></div>
                <div class="block block3"></div>
            </div>
        </div>
        <div class="line line-2">
            <div class="column col1 d-none d-xxl-block">
                <div class="block block1"><img src="img/layout/block-ball.svg" alt=""></div>
                <div class="block block2"></div>
                <div class="block block3"></div>
            </div>
            <div class="column col2 d-none d-lg-block">
                <div class="block block1"></div>
                <div class="block block2"></div>
                <div class="block block3"><img src="img/layout/block-win.svg" alt="" class="win"></div>
            </div>
            <div class="column col3 d-none d-md-block">
                <div class="block block1"></div>
                <div class="block block2"></div>
                <div class="block block3"></div>
            </div>
            <div class="column col4 d-none d-md-block">
                <div class="block block1"></div>
                <div class="block block2"><img src="img/layout/block-star.svg" alt=""></div>
                <div class="block block3"></div>
            </div>
            <article class="topic">
                <div class="image"><img src="img/layout/easy.svg" alt="EASY TO PLAY"></div>
                <div class="text">
                    <header><h3>EASY TO PLAY</h3></header>
                    <p>Easily connect via your. <br class="mobile">
                    No app download required.</p>
                </div>
            </article>

            <div class="column col5 d-none d-xl-block">
                <div class="block block1"><img src="img/layout/block-circle.svg" alt=""></div>
                <div class="block block2"></div>
                <div class="block block3"></div>
            </div>
        </div>
        <div class="line line-3">
            <div class="column col1 d-none d-xxl-block">
                <div class="block block1"></div>
                <div class="block block2"><img src="img/layout/block-circle.svg" alt=""></div>
                <div class="block block3"></div>
            </div>
            <div class="column col2 d-none d-lg-block">
                <div class="block block1"></div>
                <div class="block block2"></div>
                <div class="block block3"></div>
            </div>
            <article class="topic">
                <div class="image"><img src="img/layout/personalized.svg" alt="PERSONALIZED FOR YOU"></div>
                <div class="text">
                    <header><h3>PERSONALIZED <br class="mobile">FOR YOU</h3></header>
                    <p>Streaks is designed to get better the more you play. Personalized gameplay, favorites leagues, teams, players and prizes, etc.</p>
                </div>
            </article>
            <div class="column col3 d-none d-md-block">
                <div class="block block1"></div>
                <div class="block block2"><img src="img/layout/block-helmet.svg" alt=""></div>
                <div class="block block3"></div>
            </div>
            <div class="column col4 d-none d-xxl-block">
                <div class="block block1"><img src="img/layout/block-bg.svg" alt=""></div>
                <div class="block block2"></div>
                <div class="block block3"><img src="img/layout/block-dots2.svg" alt=""></div>
            </div>
        </div>
        <div class="line line-4">
            <div class="column col1 d-none d-xxl-block">
                <div class="block block1"></div>
                <div class="block block2"><img src="img/layout/block-bg.svg" alt=""></div>
                <div class="block block3"></div>
            </div>
            <div class="column col2 d-none d-lg-block">
                <div class="block block1"><img src="img/layout/block-dots3.svg" alt=""></div>
                <div class="block block2"></div>
                <div class="block block3"></div>
            </div>
            <div class="column col3 d-none d-md-block">
                <div class="block block1"></div>
                <div class="block block2"></div>
                <div class="block block3"><img src="img/layout/block-tenisball.svg" alt="" class="tenisball"></div>
            </div>
            <div class="column col4 d-none d-md-block">
                <div class="block block1"></div>
                <div class="block block2"></div>
                <div class="block block3"></div>
            </div>
            <article class="topic">
                <div class="image"><img src="img/layout/win.svg" alt="WIN GUARANTEED"></div>
                <div class="text">
                    <header><h3>WIN GUARANTEED</h3></header>
                    <p>Top places win x, y, z but everyone also earns for just playing. <span class="pink">(How much disclaimer text will be here?)</span></p>
                </div>
            </article>
            <div class="column col5 d-none d-xl-block">
                <div class="block block1"></div>
                <div class="block block2"></div>
                <div class="block block3"><img src="img/layout/block-circle.svg" alt=""></div>
            </div>
        </div>
        <div class="line line-5">
            <div class="column col1 d-none d-xxl-block">
                <div class="block block1"></div>
                <div class="block block2"></div>
                <div class="block block3"></div>
            </div>
            <div class="column col2 d-none d-lg-block">
                <div class="block block1"></div>
                <div class="block block2"></div>
                <div class="block block3"><img src="img/layout/block-picks.svg" alt="" class="picks"></div>
            </div>
            <article class="topic">
                <div class="image"><img src="img/layout/unique.svg" alt="UNIQUE PRIZING"></div>
                <div class="text">
                    <header><h3>UNIQUE PRIZING</h3></header>
                    <p>Convert your streaks points into cash, crypto (BTC, ETH, DOGE), prizes or experiences. </p>
                </div>
            </article>
            <div class="column col3 d-none d-md-block">
                <div class="block block1"></div>
                <div class="block block2"><img src="img/layout/block-star.svg" alt=""></div>
                <div class="block block3"><img src="img/layout/arrow-left.svg" alt=""></div>
            </div>
            <div class="column col4 d-none d-md-block">
                <div class="block block1"></div>
                <div class="block block2"></div>
                <div class="block block3"><img src="img/layout/arrow-left.svg" alt=""></div>
            </div>
            <div class="column col5 d-none d-xl-block">
                <div class="block block1"></div>
                <div class="block block2"></div>
                <div class="block block3"><img src="img/layout/arrow-left.svg" alt=""></div>
            </div>
        </div>
    </div>
</section>