Cp Discovery Hero Tear Variant Edit

<div class="discovery-hero discovery-hero--has-tear" data-module="discoveryHero" data-has-tear="true">
    <div class="discovery-hero__heading">
        <div class="grid-container">
            <div class="grid-x">
                <div class="cell medium-6">
                    <h1 class="discovery-hero__title"></h1>
                    <p class="discovery-hero__subtitle"></p>
                </div>
            </div>
        </div>
    </div>
    <div class="hero-controls hero-controls--left">
        <div class="hero-controls__timer js-hero-timer active">
            <svg class="hero-controls__timer-circle">
                <circle r="27" cx="33" cy="33"></circle>
            </svg>
            <button class="hero-controls__button hero-controls__button--pause js-hero-pause" aria-label="Pause slideshow"></button>
            <button class="hero-controls__button hero-controls__button--play js-hero-play disabled" aria-label="Resume slideshow"></button>
        </div>
    </div>
    <div class="carousel" role="region" aria-label="">
        <div class="carousel__slider">
        </div>
    </div>
    <div class="hero-controls hero-controls--right">
        <button class="hero-controls__button hero-controls__button--prev js-hero-prev" aria-label="Previous slide"></button>
        <button class="hero-controls__button hero-controls__button--next js-hero-next" aria-label="Next slide"></button>
    </div>
</div>