<section class="how-to-play temp how-it-works">
    <header class="header"><h2>How to Play</h2></header>
    <div class="content">
        <div class="item item1">
            <div class="arrow-right-animation">
                <div class="animation-stage">
                    <div class="dotted-arrow one">
                        <img src="img/layout/arrow-right.svg" alt="">
                    </div>
                    <div class="dotted-arrow two">
                        <img src="img/layout/arrow-right.svg" alt="">
                    </div>
                    <div class="dotted-arrow three">
                        <img src="img/layout/arrow-right.svg" alt="">
                    </div>
                </div>
            </div>
            <article>
                <span class="number">1</span>
                <div class="thumb">
                    <!-- <img src="img/layout/pick-a-contest.svg" alt="Pick a Contest"> -->
                    <div class="hiw-0">
                        <div class="animation-stage">
                            <div class="static">
                                <img src="img/layout/hiw-0-static.svg" alt="">
                            </div>
                            <div class="screen">
                                <div class="card card1">
                                    <img src="img/layout/hiw-0-card1.svg" alt="">
                                </div>
                                <div class="card card2">
                                    <img src="img/layout/hiw-0-card2.svg" alt="">
                                </div>
                                <div class="card card3">
                                    <img src="img/layout/hiw-0-card3.svg" alt="">
                                </div>
                                <div class="card card4">
                                    <img src="img/layout/hiw-0-card4.svg" alt="">
                                </div>
                            </div>
                            
                            <div class="dots">
                                <div class="dot">
                                    <img src="img/layout/hiw-dot.svg" alt="">
                                </div>
                                <div class="dot">
                                    <img src="img/layout/hiw-dot.svg" alt="">
                                </div>
                                <div class="dot">
                                    <img src="img/layout/hiw-dot.svg" alt="">
                                </div>
                                <div class="dot">
                                    <img src="img/layout/hiw-dot.svg" alt="">
                                </div>
                            </div>
                            
                        </div>
                    </div>
                </div>
                <header><h3>Pick a Contest</h3></header>
                <p>FREE entry into contests.</p>
            </article>
        </div>
        <div class="item item2">
            <div class="arrow-right-animation">
                <div class="animation-stage">
                    <div class="dotted-arrow one">
                        <img src="img/layout/arrow-right.svg" alt="">
                    </div>
                    <div class="dotted-arrow two">
                        <img src="img/layout/arrow-right.svg" alt="">
                    </div>
                    <div class="dotted-arrow three">
                        <img src="img/layout/arrow-right.svg" alt="">
                    </div>
                </div>
            </div>
            <article>
                <span class="number">2</span>
                <div class="thumb">
                    <!-- <img src="img/layout/make-your-picks.svg" alt="Make Your Picks"> -->
                    <div class="hiw-1">
                        <div class="animation-stage">
                            <div class="static">
                                <img src="img/layout/hiw-1-static.svg" alt="">
                            </div>
                            <div class="letter-a">
                                <svg xmlns="http://www.w3.org/2000/svg" width="5.44" height="12.92">
                                    <path d="M1.73 12.92H0V2.21C0 .74.69 0 2.07 0h1.3c1.38 0 2.07.74 2.07 2.21v10.71H3.71V8.19H1.73v4.73zm1.98-6.3v-4.3c0-.5-.25-.76-.76-.76h-.47c-.5 0-.76.25-.76.76v4.3h1.99z" />
                                </svg>
                            </div>
                            <div class="correct">
                                <img src="img/layout/hiw-1-correct.svg" alt="">
                            </div>
                            <div class="dots">
                                <div class="dot">
                                    <img src="img/layout/hiw-dot.svg" alt="">
                                </div>
                                <div class="dot">
                                    <img src="img/layout/hiw-dot.svg" alt="">
                                </div>
                                <div class="dot">
                                    <img src="img/layout/hiw-dot.svg" alt="">
                                </div>
                            </div>
                            <div class="check">
                                <img src="img/layout/hiw-1-check.svg" alt="">
                            </div>
                            <div class="text">
                                <img src="img/layout/hiw-1-text.svg" alt="">
                            </div>
                        </div>
                    </div>
                </div>
                <header><h3>Make Your Picks</h3></header>
                <p>Answer 6 pre-game questions and look out for the 2 in-game bonus questions to collect maximum Streaks.</p>
            </article>
        </div>
        <div class="item item3">
            <div class="arrow-right-animation">
                <div class="animation-stage">
                    <div class="dotted-arrow one">
                        <img src="img/layout/arrow-right.svg" alt="">
                    </div>
                    <div class="dotted-arrow two">
                        <img src="img/layout/arrow-right.svg" alt="">
                    </div>
                    <div class="dotted-arrow three">
                        <img src="img/layout/arrow-right.svg" alt="">
                    </div>
                </div>
            </div>
            <article>
                <span class="number">3</span>
                <div class="thumb">
                    <!-- <img src="img/layout/collect-streaks.svg" alt="Collect Streaks"> -->
                    <div class="hiw-2">
                        <div class="animation-stage">
                            <div class="static">
                                <img src="img/layout/hiw-2-static.svg" alt="">
                            </div>
                            <div class="streaks">
                                <div class="streak">
                                    <div class="dot">
                                        <img src="img/layout/dot.svg" alt="">
                                    </div>
                                    <img src="img/layout/hiw-2-streak-2.svg" alt="">
                                </div>
                                <div class="streak">
                                    <div class="dot">
                                        <img src="img/layout/dot.svg" alt="">
                                    </div>
                                    <img src="img/layout/hiw-2-streak-2.svg" alt="">
                                </div>
                                <div class="streak">
                                    <div class="dot">
                                        <img src="img/layout/dot.svg" alt="">
                                    </div>
                                    <img src="img/layout/hiw-2-streak-2.svg" alt="">
                                </div>
                                <div class="streak">
                                    <div class="dot">
                                        <img src="img/layout/dot.svg" alt="">
                                    </div>
                                    <img src="img/layout/hiw-2-streak-2.svg" alt="">
                                </div>
                            </div>
                            <div class="dot-container one">
                                <div class="star-three">
                                    <img src="img/layout/star-three.svg" alt="">
                                </div>
                                <div class="dots">
                                    <div class="dot">
                                        <img src="img/layout/dot.svg" alt="">
                                    </div>
                                    <div class="dot">
                                        <img src="img/layout/dot.svg" alt="">
                                    </div>
                                    <div class="dot">
                                        <img src="img/layout/dot.svg" alt="">
                                    </div>
                                </div>
                            </div>
                            <div class="dot-container two">
                                <div class="star-three">
                                    <img src="img/layout/star-three.svg" alt="">
                                </div>
                                <div class="dots">
                                    <div class="dot">
                                        <img src="img/layout/dot.svg" alt="">
                                    </div>
                                    <div class="dot">
                                        <img src="img/layout/dot.svg" alt="">
                                    </div>
                                    <div class="dot">
                                        <img src="img/layout/dot.svg" alt="">
                                    </div>
                                </div>
                            </div>
                            <div class="dot-container three">
                                <div class="star-three">
                                    <img src="img/layout/star-three.svg" alt="">
                                </div>
                                <div class="dots">
                                    <div class="dot">
                                        <img src="img/layout/dot.svg" alt="">
                                    </div>
                                    <div class="dot">
                                        <img src="img/layout/dot.svg" alt="">
                                    </div>
                                    <div class="dot">
                                        <img src="img/layout/dot.svg" alt="">
                                    </div>
                                </div>
                            </div>
                            <div class="dot-container four">
                                <div class="star-three">
                                    <img src="img/layout/star-three.svg" alt="">
                                </div>
                                <div class="dots">
                                    <div class="dot">
                                        <img src="img/layout/dot.svg" alt="">
                                    </div>
                                    <div class="dot">
                                        <img src="img/layout/dot.svg" alt="">
                                    </div>
                                    <div class="dot">
                                        <img src="img/layout/dot.svg" alt="">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <header><h3>Collect Streaks</h3></header>
                <p>Collect a Streak for each question you get right. Collect bonus streaks when you invite your friends to play.</p>
            </article>
        </div>
        <div class="item item4">
            <div class="arrow-right-animation">
                <div class="animation-stage">
                    <div class="dotted-arrow one">
                        <img src="img/layout/arrow-right.svg" alt="">
                    </div>
                    <div class="dotted-arrow two">
                        <img src="img/layout/arrow-right.svg" alt="">
                    </div>
                    <div class="dotted-arrow three">
                        <img src="img/layout/arrow-right.svg" alt="">
                    </div>
                </div>
            </div>
            <article>
                <span class="number">4</span>
                <div class="thumb">
                    <!-- <img src="img/layout/win-cash.svg" alt="Win Cash, Crypto or Prizes"> -->
                    <div class="hiw-3">
                        <div class="animation-stage">
                            <div class="static">
                                <img src="img/layout/hiw-3-static.svg" alt="">
                            </div>
                            <div class="gift">
                                <img src="img/layout/hiw-3-gift.svg" alt="">
                            </div>
                            <div class="star-one one">
                                <img src="img/layout/star-one.svg" alt="">
                            </div>
                            <div class="star-two one">
                                <img src="img/layout/star-two.svg" alt="">
                            </div>
                            <div class="star-three one">
                                <img src="img/layout/star-three.svg" alt="">
                            </div>
                            <div class="dots">
                                <div class="dot">
                                    <img src="img/layout/dot.svg" alt="">
                                </div>
                                <div class="dot">
                                    <img src="img/layout/dot.svg" alt="">
                                </div>
                                <div class="dot">
                                    <img src="img/layout/dot.svg" alt="">
                                </div>
                                <div class="dot">
                                    <img src="img/layout/dot.svg" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <header><h3>Win Cash, Crypto or Prizes</h3></header>
                <p>1st Place Wins <span class="pink">$500</span>, 2nd Place Wins <span class="pink">$250</span>, 3rd Place Wins <span class="pink">$100</span>. Collect All 8 Streaks and Win <span class="pink">$1000</span> instantly!</p>
                <div class="you-win">
                    <svg xmlns="http://www.w3.org/2000/svg" width="50.37" height="42.51" viewBox="0 0 50.37 42.51">
                        <path d="M19.06 16.55l-5.1 25.96h-3.69L8.93 27.47 6.11 42.51H2.42L0 16.55h3.37L4.78 36l3.43-19.45h2.64L12.26 36l3.43-19.45h3.37zM21.45 42.5l1.34-25.96h3.4L24.85 42.5h-3.4zM37.57 29.09l.65-12.54h3.4l-1.34 25.96h-3.4l.25-5.17-3.04-11.82-.87 16.99h-3.4l1.34-25.96h3.4l3.01 12.54zM49.25 38.09l-.22 4.41h-3.61l.22-4.41h3.61zm1.12-21.54l-1.41 18.94H46.1l.51-18.94h3.76z" />
                        <path d="M17.71 4.83L14.56 0h1.99l2.04 3.29L20.6 0h1.99l-3.13 4.83v3.35h-1.74l-.01-3.35zM21.4 5.22c0-1.68 1.18-3.1 3.13-3.1 1.96 0 3.14 1.42 3.14 3.1 0 1.69-1.18 3.12-3.14 3.12-1.95-.01-3.13-1.43-3.13-3.12zm4.65 0c0-.92-.55-1.72-1.52-1.72s-1.51.8-1.51 1.72c0 .93.54 1.73 1.51 1.73s1.52-.8 1.52-1.73zM32.83 7.44c-.41.45-1.12.9-2.09.9-1.3 0-1.91-.71-1.91-1.87V2.26h1.56v3.59c0 .82.43 1.09 1.09 1.09.6 0 1.08-.33 1.35-.67V2.26h1.56v5.93h-1.56v-.75z" />
                    </svg>
                    <img src="img/layout/you-win.svg" alt="You Win">
                </div>
            </article>
        </div>
    </div>
</section>