<!-- NEXT PROJECT -->
<aside class="section section-fullheight auto-scroll-next bt-opacity js-auto-scroll-next" data-arts-component-name="AutoScrollNext" data-ajax-transition="autoScrollNext" data-post-id="data-post-id">
  <div class="section-fullheight__inner auto-scroll-next__inner js-auto-scroll-next__fixed-wrapper js-mask" data-arts-component-name="Mask" data-arts-component-options="{clone: false}">
    <!-- Top "next" label -->
    <div class="marquee-header auto-scroll-next__label bb-opacity js-marquee-header" data-arts-component-name="MarqueeHeader" data-arts-component-options="{delimiter: '&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;→&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;'}">
      <div class="marquee-header__inner js-marquee-header__wrapper">
        <!-- Lane "next project" -->
        <div class="marquee-header__lane auto-scroll-next__label-lane-normal py-xsmall js-marquee-header__list-lane" data-arts-infinite-list-options="{inverse: true}">
          <div class="marquee-header__item d-inline-block js-marquee-header__list-item">
            <div class="ui-element js-marquee-header__label">Next Project</div>
          </div>
        </div>
        <!-- - Lane "next project" -->
        <!-- Lane "keep scrolling" -->
        <div class="marquee-header__lane marquee-header__lane_mask auto-scroll-next__label-lane-scrolling py-xsmall align-items-center js-marquee-header__list-lane" data-arts-infinite-list-options="{inverse: true}">
          <div class="marquee-header__item d-inline-block js-marquee-header__list-item">
            <div class="ui-element color-accent js-marquee-header__label">Keep Scrolling</div>
          </div>
        </div>
        <!-- - Lane "keep scrolling" -->
        <!-- Progress line-->
        <div class="auto-scroll-next__progress-line color-accent js-auto-scroll-next__progress-line"></div>
      </div>
    </div>
    <!-- - Top "next" label -->
    <!-- Marquee header -->
    <div class="marquee-header auto-scroll-next__header position-static js-auto-scroll-next__next-header js-marquee-header" data-arts-component-name="MarqueeHeader" data-arts-component-options="{}" data-arts-cursor-follower-target="{hideNative: true, scale: '120px', label: 'View Next', color: '#000', background: 'var(--color-accent-dark-theme)'}">
      <div class="marquee-header__inner js-marquee-header__wrapper">
        <!-- Project heading / link -->
        <a class="auto-scroll-next__link marquee-header__lane auto-scroll-next__lane js-marquee-header__list-lane" href="06-01-02-project-details.html" data-arts-infinite-list-options="{inverse: false}">
          <div class="marquee-header__item d-inline-block js-marquee-header__list-item">
            <h2 class="h1 auto-scroll-next__heading js-marquee-header__label">Silent Listener</h2>
          </div>
        </a>
        <!-- - Project heading & link -->
        <!-- Mask project heading -->
        <div class="marquee-header__lane auto-scroll-next__lane marquee-header__lane_mask js-mask__target js-marquee-header__list-lane" data-arts-infinite-list-options="{inverse: false}">
          <div class="marquee-header__item d-inline-block js-marquee-header__list-item">
            <div class="h1 auto-scroll-next__heading color-accent-dark-theme js-marquee-header__label">Silent Listener</div>
          </div>
        </div>
        <!-- - Mask project heading -->
      </div>
    </div>
    <!-- - Marquee header -->
    <!-- Featured media -->
    <div class="marquee-header__mask-media auto-scroll-next__wrapper-media" data-arts-cursor-follower-target="{hideNative: true, scale: '120px', label: 'View Next', color: '#000', background: 'var(--color-accent-dark-theme)'}">
      <div class="auto-scroll-next__inner-media js-auto-scroll-next__wrapper-media js-ajax-transition-element">
        <div class="auto-scroll-next__mask-media js-ajax-transition-element__mask js-mask__source">
          <img class="lazy auto-width-height js-ajax-transition-element__media js-auto-scroll-next__media" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='100%25'%20height='100%25'%3E%3C/svg%3E" decoding="async" data-src="img/assets/postsPortfolio/project02/02-cover-1-landscape.jpg" width="1920" height="1280" alt=""/>
        </div>
      </div>
    </div>
    <!-- - Featured media -->
    <!-- Rotating buttons -->
    <div class="auto-scroll-next__wrapper-button text-center js-auto-scroll-next__scroll-down-wrapper" data-arts-cursor-follower-target="{hideNative: true, scale: '120px', label: 'View Next', color: '#000', background: 'var(--color-accent-dark-theme)'}">
      <div class="auto-scroll-next__button-normal">
        <div class="rotating-button js-rotating-button" data-arts-component-name="RotatingButton" data-arts-component-options="{loopRounds: 1}" data-arts-os-animation="false">
          <div class="rotating-button__link subheading js-rotating-button__link">
            <div class="rotating-button__label js-rotating-button__label">Scroll Down</div>
            <div class="rotating-button__icon js-rotating-button__icon">
              <svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg">
                <polygon transform="translate(10.000000, 9.160254) rotate(-330.000000) translate(-10.000000, -9.160254) " points="9 -0.839745962 11 -0.839745962 11 19.160254 9 19.160254"></polygon>
                <polygon transform="translate(10.000000, 9.160254) rotate(-30.000000) translate(-10.000000, -9.160254) " points="9 -0.839745962 11 -0.839745962 11 19.160254 9 19.160254"></polygon>
                <polygon transform="translate(10.000000, 9.160254) rotate(-90.000000) translate(-10.000000, -9.160254) " points="9 -0.839745962 11 -0.839745962 11 19.160254 9 19.160254"></polygon>
              </svg>
            </div>
          </div>
        </div>
      </div>
      <div class="auto-scroll-next__button-hover">
        <div class="rotating-button js-rotating-button" data-arts-component-name="RotatingButton" data-arts-component-options="{loopRounds: 1}" data-arts-os-animation="false">
          <div class="rotating-button__link subheading js-rotating-button__link">
            <div class="rotating-button__label js-rotating-button__label">Explore Project</div>
            <div class="rotating-button__icon js-rotating-button__icon">
              <svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg">
                <polygon transform="translate(10.000000, 9.160254) rotate(-330.000000) translate(-10.000000, -9.160254) " points="9 -0.839745962 11 -0.839745962 11 19.160254 9 19.160254"></polygon>
                <polygon transform="translate(10.000000, 9.160254) rotate(-30.000000) translate(-10.000000, -9.160254) " points="9 -0.839745962 11 -0.839745962 11 19.160254 9 19.160254"></polygon>
                <polygon transform="translate(10.000000, 9.160254) rotate(-90.000000) translate(-10.000000, -9.160254) " points="9 -0.839745962 11 -0.839745962 11 19.160254 9 19.160254"></polygon>
              </svg>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- - Rotating buttons -->
  </div>
</aside>
<!-- - NEXT PROJECT -->