mypage: Rekordbox Cloud Dropbox

<div class="mypage">
    <div class="mypage__nav">

        <nav class="myPageNav">
            <ul class="myPageNav__list">
                <li class="myPageNav__item myPageNav__item--main">
                    <a href="#" class="myPageNav__link myPageNav__link--main">My page top</a>
                </li>
                <li class="myPageNav__item myPageNav__item--main">
                    <a href="#" class="myPageNav__link myPageNav__link--main">Account</a>
                    <ul class="myPageNav__list myPageNav__list--sub">
                        <li class="myPageNav__item myPageNav__item--sub">
                            <a href="#" class="myPageNav__link myPageNav__link--sub">Registration information</a>
                        </li>
                        <li class="myPageNav__item myPageNav__item--sub">
                            <a href="#" class="myPageNav__link myPageNav__link--sub">Password management</a>
                        </li>
                        <li class="myPageNav__item myPageNav__item--sub">
                            <a href="#" class="myPageNav__link myPageNav__link--sub">Email reception settings</a>
                        </li>
                    </ul>
                </li>
                <li class="myPageNav__item myPageNav__item--main">
                    <a href="#" class="myPageNav__link myPageNav__link--main">Hardware</a>
                    <ul class="myPageNav__list myPageNav__list--sub">
                        <li class="myPageNav__item myPageNav__item--sub">
                            <a href="#" class="myPageNav__link myPageNav__link--sub">Product registration</a>
                        </li>
                        <li class="myPageNav__item myPageNav__item--sub">
                            <a href="#" class="myPageNav__link myPageNav__link--sub">Purchase history</a>
                        </li>
                        <li class="myPageNav__item myPageNav__item--sub">
                            <a href="#" class="myPageNav__link myPageNav__link--sub">AlphaTheta Care Extended warranty service</a>
                        </li>
                    </ul>
                </li>
                <li class="myPageNav__item myPageNav__item--main myPageNav__item--active">
                    <a href="#" class="myPageNav__link myPageNav__link--main">Recordbox</a>
                    <ul class="myPageNav__list myPageNav__list--sub">
                        <li class="myPageNav__item myPageNav__item--sub">
                            <a href="#" class="myPageNav__link myPageNav__link--sub">Contract Plan/Purchase History</a>
                        </li>
                        <li class="myPageNav__item myPageNav__item--sub">
                            <a href="#" class="myPageNav__link myPageNav__link--sub">Purchase history</a>
                        </li>
                        <li class="myPageNav__item myPageNav__item--sub">
                            <a href="#" class="myPageNav__link myPageNav__link--sub">Cloud settings</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </nav>

    </div>

    <div class="mypage__content">
        <section class="mypage__section">

            <div class="mypage__heading">
                <a href="#" class="mypage__link link link--back link--icon-left">
                    <span class="link__icon">
                        <svg class="icon-chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
                            <path fill="currentColor" d="M11.172 9.82L13 8 9.906 4.99 6.04 1.21c-.281-.28-.703-.28-.914 0l-.914.91c-.281.28-.281.7 0 .91L9.273 8l-5.062 4.97c-.281.28-.281.7 0 .91l.914.91c.281.28.703.28.914 0l5.133-4.97z" />
                        </svg>

                    </span>
                    <span class="link__label">Back to cloud settings</span>
                </a>

            </div>

            <h1 class="mypage__titlewrap">
                <span>Rekordbox</span>
            </h1>

            <div class="spacer spacer--4"></div>

            <picture class="visual visual--in-flow">
                <source media="(max-width: 899px)" data-sizes="auto" data-srcset="/graphics/video-poster-mobile.webp" type="image/webp">
                <source media="(max-width: 899px)" data-sizes="auto" data-srcset="/graphics/video-poster-mobile.jpg">
                <source media="(min-width: 900px)" data-sizes="auto" data-srcset="/graphics/video-poster.webp" type="image/webp">
                <source media="(min-width: 900px)" data-sizes="auto" data-srcset="/graphics/video-poster.jpg">
                <img data-sizes="auto" data-src="/graphics/video-poster-mobile.jpg" class="lazyload" alt="">
            </picture>

            <div class="spacer spacer--4"></div>

            <div class="partnership">
                <div class="partnership__wrapper">
                    <img src="/graphics/dropbox.png" alt="">
                    <h2 class="mypage__titlewrap--subtitle">
                        <span>Rekordbox Cloud Unlimited powered by Dropbox</span>
                    </h2>
                </div>
            </div>

            <div class="spacer spacer--4"></div>

            <div class="mypage__block">
                <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>

            <div class="spacer spacer--6"></div>

            <div class="actions actions--center actions--force">
                <div class="actions__item">

                    <button type="submit" class="action action--normal action--on-light">
                        <span class="action__label">Lorem ipsum</span>
                        <span class="action__bg"></span>
                    </button>

                </div>
            </div>
        </section>
    </div>
</div>