mypage: Cloud Settings Set

<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">
                    <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 myPageNav__item--active">
                            <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>
            <p>If you want to change the Dropbox account that participates in the Professionel DJ Team, please press the unlock button.</p>
        </section>

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

                <div class="mypage__informationfield">
                    <div class="grid grid--two-col">
                        <div class="grid__col grid__col--fullw">
                            <div class="col__label">Email address</div>
                            <div class="col__content">lorem.ipsum@gmail.com</div>
                        </div>

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

                        <small>Rekordbox Cloud Ulimited powered by Dropbox.</small>
                    </div>
                </div>
            </div>
        </section>

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

                <a href="#" class="action action--ghost action--on-light">
                    <span class="action__label">Cancel</span>
                    <span class="action__bg"></span>
                </a>

            </div>
        </div>

        <!-- !!!!! For testing purposes only !!!!! -->
        <style>
            .divider {
                margin-top: var(--gap--10);
            }
        </style>
        <!-- !!!!! / For testing purposes only !!!!! -->

        <hr class="divider">

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

        <a href="#" class="link link--colored">
            <span class="link__label">FAQ</span>
        </a>

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

        <a href="#" class="link link--colored">
            <span class="link__label">Settings</span>
        </a>

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