Flex Multi Text Accordion
The benefits
Get all the benefits available all year round for this level
Long title spans over two lines pushes the body down
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non ante id sapien facilisis rutrum. Mauris nec turpis nec ante tempus semper. Donec fringilla lectus at venenatis.
Long title spans over two lines pushes the body down
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi asperiores blanditiis commodi consequatur dolores esse, est excepturi illo ipsa iste iusto laborum magni placeat quasi quisquam reprehenderit, sint, soluta velit?
Long title spans over two lines pushes the body down
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti, doloribus!
Long title spans over two lines pushes the body down
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id illum, nihil pariatur quas temporibus voluptas!
Long title spans over two lines pushes the body down
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ab, adipisci, cumque dolor dolorem esse explicabo illo in itaque labore magni mollitia neque numquam quam quas quidem quo quod reiciendis?
Long title spans over two lines pushes the body down
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ab, adipisci, cumque dolor.
Long title spans over two lines pushes the body down
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Long title spans over two lines pushes the body down
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt nobis quam quod.
Long title spans over two lines pushes the body down
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, nostrum.
<section class="multi-text-accordion">
<div class="bs-container bs-container-lg">
<div class="bs-row bs-gx-lg-5 bs-gx-xl-">
<div class="bs-col-12 bs-col-md-6">
<!-- prettier-ignore -->
<div class="multi-text-accordion__group">
<button type="button" class="d-block text-start w-100 accordion__button multi-text-accordion__button px-3 py-3 canon-paragraph--medium position-relative">
Discount on member week - Video
</button>
<div class="accordion__collapsable multi-text-accordion__collapsable">
<div class="multi-text-accordion__content text-start text-md-center">
<h3 class="canon-section-title--small canon-mb-xxs">Long title spans over two lines pushes the body down</h3>
<p class="canon-paragraph--medium canon-mb-xxxs"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non ante id sapien facilisis rutrum. Mauris nec
turpis nec ante tempus semper. Donec fringilla lectus at venenatis.
</p>
<div class="text-center">
<a href="#" class="button button--blue button--medium canon-mb-xxs">Normal text</a>
</div>
<div class="position-relative">
<picture class="canon-amplience">
<source srcset="//i1.adis.ws/i/canon/canon-pro-ulla-lohmann-kites-rf-zooms-1-1140?$search-result-thumb-4by3$" media="(min-width: 1472px)" class="canon-amplience__image" />
<source srcset="//i1.adis.ws/i/canon/canon-pro-ulla-lohmann-kites-rf-zooms-1-1140?$search-result-thumb-4by3$" media="(min-width: 1200px)" class="canon-amplience__image" />
<source srcset="//i1.adis.ws/i/canon/canon-pro-ulla-lohmann-kites-rf-zooms-1-1140?$search-result-thumb-4by3$" media="(min-width: 769px)" class="canon-amplience__image" />
<source srcset="//i1.adis.ws/i/canon/canon-pro-ulla-lohmann-kites-rf-zooms-1-1140?$search-result-thumb-4by3$" media="(min-width: 0)" class="canon-amplience__image" />
<img src="//i1.adis.ws/i/canon/canon-pro-ulla-lohmann-kites-rf-zooms-1-1140?$search-result-thumb-4by3-jpg$" srcset="//i1.adis.ws/i/canon/canon-pro-ulla-lohmann-kites-rf-zooms-1-1140?$search-result-thumb-4by3-jpg$" alt="Canon Camera" class="canon-amplience__image" />
</picture>
<div class="responsive-video__video-element">
<div class="responsive-video__placeholder responsive-video__placeholder--mobile"></div>
<div class="responsive-video__video-play-overlay" data-account-id="640741352001" data-player-id="mACUN0fy8z" data-video-id="2888b424eec74936a94479d280390f41" data-poster="\/\/i1.adis.ws\/i\/canon\/print-supplies?w=544&qlt=60" data-element-id="facelift-video" controls>
<button class="responsive-video__video-play">
<svg width="24" height="32" xmlns="http://www.w3.org/2000/svg">
<path d="M22.954 13.88L3.39.861A1.775 1.775 0 0 0 .464 2.45l.133 26.708c-.053.73.308 1.429.934 1.808.23.12.484.181.742.18a2.269 2.269 0 0 0 1.266-.433L22.972 17.45a2.054 2.054 0 0 0-.019-3.57h.001zm-.963 2.128L2.557 29.271c-.06.042-.126.078-.194.106a1.017 1.017 0 0 1-.024-.229L2.206 2.44a.136.136 0 1 1 .216-.128l19.566 13.02c.194.133.27.26.27.339 0 .077-.067.203-.268.338z" fill="currentColor" fill-rule="nonzero" />
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="multi-text-accordion__group">
<button type="button" class="d-block text-start w-100 accordion__button multi-text-accordion__button px-3 py-3 canon-paragraph--medium position-relative">
Exclusive merchandise - video lightbox
</button>
<div class="accordion__collapsable multi-text-accordion__collapsable">
<div class="multi-text-accordion__content text-start text-md-center">
<h3 class="canon-section-title--small canon-mb-xxs">Long title spans over two lines pushes the body down</h3>
<p class="canon-paragraph--medium canon-mb-xxxs"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi asperiores blanditiis commodi consequatur
dolores esse, est excepturi illo ipsa iste iusto laborum magni placeat quasi quisquam reprehenderit, sint,
soluta velit?
</p>
<div class="text-center">
<a href="#" class="button button--blue button--medium canon-mb-xxs">Normal text</a>
</div>
<div class="position-relative">
<picture class="canon-amplience">
<source srcset="//i1.adis.ws/i/canon/canon-pro-ulla-lohmann-kites-rf-zooms-1-1140?$search-result-thumb-4by3$" media="(min-width: 1472px)" class="canon-amplience__image" />
<source srcset="//i1.adis.ws/i/canon/canon-pro-ulla-lohmann-kites-rf-zooms-1-1140?$search-result-thumb-4by3$" media="(min-width: 1200px)" class="canon-amplience__image" />
<source srcset="//i1.adis.ws/i/canon/canon-pro-ulla-lohmann-kites-rf-zooms-1-1140?$search-result-thumb-4by3$" media="(min-width: 769px)" class="canon-amplience__image" />
<source srcset="//i1.adis.ws/i/canon/canon-pro-ulla-lohmann-kites-rf-zooms-1-1140?$search-result-thumb-4by3$" media="(min-width: 0)" class="canon-amplience__image" />
<img src="//i1.adis.ws/i/canon/canon-pro-ulla-lohmann-kites-rf-zooms-1-1140?$search-result-thumb-4by3-jpg$" srcset="//i1.adis.ws/i/canon/canon-pro-ulla-lohmann-kites-rf-zooms-1-1140?$search-result-thumb-4by3-jpg$" alt="Canon Camera" class="canon-amplience__image" />
</picture>
<div class="responsive-video__video-play-overlay">
<button class="responsive-video__video-play" data-video="lightbox-video" data-size>
<svg width="24" height="32" xmlns="http://www.w3.org/2000/svg">
<path d="M22.954 13.88L3.39.861A1.775 1.775 0 0 0 .464 2.45l.133 26.708c-.053.73.308 1.429.934 1.808.23.12.484.181.742.18a2.269 2.269 0 0 0 1.266-.433L22.972 17.45a2.054 2.054 0 0 0-.019-3.57h.001zm-.963 2.128L2.557 29.271c-.06.042-.126.078-.194.106a1.017 1.017 0 0 1-.024-.229L2.206 2.44a.136.136 0 1 1 .216-.128l19.566 13.02c.194.133.27.26.27.339 0 .077-.067.203-.268.338z" fill="currentColor" fill-rule="nonzero" />
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="multi-text-accordion__group">
<button type="button" class="d-block text-start w-100 accordion__button multi-text-accordion__button px-3 py-3 canon-paragraph--medium position-relative">
Pre-recorded master classes
</button>
<div class="accordion__collapsable multi-text-accordion__collapsable">
<div class="multi-text-accordion__content text-start text-md-center">
<h3 class="canon-section-title--small canon-mb-xxs">Long title spans over two lines pushes the body down</h3>
<p class="canon-paragraph--medium canon-mb-xxxs"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti, doloribus!
</p>
<div class="text-center">
<a href="#" class="button button--blue button--medium canon-mb-xxs">Normal text</a>
</div>
<div class="position-relative">
<picture class="canon-amplience">
<source srcset="//i1.adis.ws/i/canon/canon-pro-ulla-lohmann-kites-rf-zooms-1-1140?$search-result-thumb-4by3$" media="(min-width: 1472px)" class="canon-amplience__image" />
<source srcset="//i1.adis.ws/i/canon/canon-pro-ulla-lohmann-kites-rf-zooms-1-1140?$search-result-thumb-4by3$" media="(min-width: 1200px)" class="canon-amplience__image" />
<source srcset="//i1.adis.ws/i/canon/canon-pro-ulla-lohmann-kites-rf-zooms-1-1140?$search-result-thumb-4by3$" media="(min-width: 769px)" class="canon-amplience__image" />
<source srcset="//i1.adis.ws/i/canon/canon-pro-ulla-lohmann-kites-rf-zooms-1-1140?$search-result-thumb-4by3$" media="(min-width: 0)" class="canon-amplience__image" />
<img src="//i1.adis.ws/i/canon/canon-pro-ulla-lohmann-kites-rf-zooms-1-1140?$search-result-thumb-4by3-jpg$" srcset="//i1.adis.ws/i/canon/canon-pro-ulla-lohmann-kites-rf-zooms-1-1140?$search-result-thumb-4by3-jpg$" alt="Canon Camera" class="canon-amplience__image" />
</picture>
</div>
</div>
</div>
</div>
<div class="multi-text-accordion__group">
<button type="button" class="d-block text-start w-100 accordion__button multi-text-accordion__button px-3 py-3 canon-paragraph--medium position-relative">
Unbelievable benefit
</button>
<div class="accordion__collapsable multi-text-accordion__collapsable">
<div class="multi-text-accordion__content text-start text-md-center">
<h3 class="canon-section-title--small canon-mb-xxs">Long title spans over two lines pushes the body down</h3>
<p class="canon-paragraph--medium canon-mb-xxxs"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id illum, nihil pariatur quas temporibus voluptas!
</p>
<div class="text-center">
<a href="#" class="button button--blue button--medium canon-mb-xxs">Normal text</a>
</div>
<div class="position-relative">
<picture class="canon-amplience">
<source srcset="//i1.adis.ws/i/canon/canon-pro-ulla-lohmann-kites-rf-zooms-1-1140?$search-result-thumb-4by3$" media="(min-width: 1472px)" class="canon-amplience__image" />
<source srcset="//i1.adis.ws/i/canon/canon-pro-ulla-lohmann-kites-rf-zooms-1-1140?$search-result-thumb-4by3$" media="(min-width: 1200px)" class="canon-amplience__image" />
<source srcset="//i1.adis.ws/i/canon/canon-pro-ulla-lohmann-kites-rf-zooms-1-1140?$search-result-thumb-4by3$" media="(min-width: 769px)" class="canon-amplience__image" />
<source srcset="//i1.adis.ws/i/canon/canon-pro-ulla-lohmann-kites-rf-zooms-1-1140?$search-result-thumb-4by3$" media="(min-width: 0)" class="canon-amplience__image" />
<img src="//i1.adis.ws/i/canon/canon-pro-ulla-lohmann-kites-rf-zooms-1-1140?$search-result-thumb-4by3-jpg$" srcset="//i1.adis.ws/i/canon/canon-pro-ulla-lohmann-kites-rf-zooms-1-1140?$search-result-thumb-4by3-jpg$" alt="Canon Camera" class="canon-amplience__image" />
</picture>
</div>
</div>
</div>
</div>
<div class="multi-text-accordion__group">
<button type="button" class="d-block text-start w-100 accordion__button multi-text-accordion__button px-3 py-3 canon-paragraph--medium position-relative">
Another level benefit
</button>
<div class="accordion__collapsable multi-text-accordion__collapsable">
<div class="multi-text-accordion__content text-start text-md-center">
<h3 class="canon-section-title--small canon-mb-xxs">Long title spans over two lines pushes the body down</h3>
<p class="canon-paragraph--medium canon-mb-xxxs"> Lorem ipsum dolor sit amet.
</p>
<div class="text-center">
<a href="#" class="button button--blue button--medium canon-mb-xxs">Normal text</a>
</div>
<div class="position-relative">
<picture class="canon-amplience">
<source srcset="//i1.adis.ws/i/canon/canon-pro-ulla-lohmann-kites-rf-zooms-1-1140?$search-result-thumb-4by3$" media="(min-width: 1472px)" class="canon-amplience__image" />
<source srcset="//i1.adis.ws/i/canon/canon-pro-ulla-lohmann-kites-rf-zooms-1-1140?$search-result-thumb-4by3$" media="(min-width: 1200px)" class="canon-amplience__image" />
<source srcset="//i1.adis.ws/i/canon/canon-pro-ulla-lohmann-kites-rf-zooms-1-1140?$search-result-thumb-4by3$" media="(min-width: 769px)" class="canon-amplience__image" />
<source srcset="//i1.adis.ws/i/canon/canon-pro-ulla-lohmann-kites-rf-zooms-1-1140?$search-result-thumb-4by3$" media="(min-width: 0)" class="canon-amplience__image" />
<img src="//i1.adis.ws/i/canon/canon-pro-ulla-lohmann-kites-rf-zooms-1-1140?$search-result-thumb-4by3-jpg$" srcset="//i1.adis.ws/i/canon/canon-pro-ulla-lohmann-kites-rf-zooms-1-1140?$search-result-thumb-4by3-jpg$" alt="Canon Camera" class="canon-amplience__image" />
</picture>
</div>
</div>
</div>
</div>
<div class="multi-text-accordion__group">
<button type="button" class="d-block text-start w-100 accordion__button multi-text-accordion__button px-3 py-3 canon-paragraph--medium position-relative">
One more benefit
</button>
<div class="accordion__collapsable multi-text-accordion__collapsable">
<div class="multi-text-accordion__content text-start text-md-center">
<h3 class="canon-section-title--small canon-mb-xxs">Long title spans over two lines pushes the body down</h3>
<p class="canon-paragraph--medium canon-mb-xxxs"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ab, adipisci, cumque dolor dolorem esse explicabo
illo in itaque labore magni mollitia neque numquam quam quas quidem quo quod reiciendis?
</p>
<div class="text-center">
<a href="#" class="button button--blue button--medium canon-mb-xxs">Normal text</a>
</div>
<div class="position-relative">
<picture class="canon-amplience">
<source srcset="//i1.adis.ws/i/canon/canon-pro-ulla-lohmann-kites-rf-zooms-1-1140?$search-result-thumb-4by3$" media="(min-width: 1472px)" class="canon-amplience__image" />
<source srcset="//i1.adis.ws/i/canon/canon-pro-ulla-lohmann-kites-rf-zooms-1-1140?$search-result-thumb-4by3$" media="(min-width: 1200px)" class="canon-amplience__image" />
<source srcset="//i1.adis.ws/i/canon/canon-pro-ulla-lohmann-kites-rf-zooms-1-1140?$search-result-thumb-4by3$" media="(min-width: 769px)" class="canon-amplience__image" />
<source srcset="//i1.adis.ws/i/canon/canon-pro-ulla-lohmann-kites-rf-zooms-1-1140?$search-result-thumb-4by3$" media="(min-width: 0)" class="canon-amplience__image" />
<img src="//i1.adis.ws/i/canon/canon-pro-ulla-lohmann-kites-rf-zooms-1-1140?$search-result-thumb-4by3-jpg$" srcset="//i1.adis.ws/i/canon/canon-pro-ulla-lohmann-kites-rf-zooms-1-1140?$search-result-thumb-4by3-jpg$" alt="Canon Camera" class="canon-amplience__image" />
</picture>
</div>
</div>
</div>
</div>
<div class="multi-text-accordion__group">
<button type="button" class="d-block text-start w-100 accordion__button multi-text-accordion__button px-3 py-3 canon-paragraph--medium position-relative">
Seventh benefit for exploring
</button>
<div class="accordion__collapsable multi-text-accordion__collapsable">
<div class="multi-text-accordion__content text-start text-md-center">
<h3 class="canon-section-title--small canon-mb-xxs">Long title spans over two lines pushes the body down</h3>
<p class="canon-paragraph--medium canon-mb-xxxs"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ab, adipisci, cumque dolor.
</p>
<div class="text-center">
<a href="#" class="button button--blue button--medium canon-mb-xxs">Normal text</a>
</div>
<div class="position-relative">
<picture class="canon-amplience">
<source srcset="//i1.adis.ws/i/canon/canon-pro-ulla-lohmann-kites-rf-zooms-1-1140?$search-result-thumb-4by3$" media="(min-width: 1472px)" class="canon-amplience__image" />
<source srcset="//i1.adis.ws/i/canon/canon-pro-ulla-lohmann-kites-rf-zooms-1-1140?$search-result-thumb-4by3$" media="(min-width: 1200px)" class="canon-amplience__image" />
<source srcset="//i1.adis.ws/i/canon/canon-pro-ulla-lohmann-kites-rf-zooms-1-1140?$search-result-thumb-4by3$" media="(min-width: 769px)" class="canon-amplience__image" />
<source srcset="//i1.adis.ws/i/canon/canon-pro-ulla-lohmann-kites-rf-zooms-1-1140?$search-result-thumb-4by3$" media="(min-width: 0)" class="canon-amplience__image" />
<img src="//i1.adis.ws/i/canon/canon-pro-ulla-lohmann-kites-rf-zooms-1-1140?$search-result-thumb-4by3-jpg$" srcset="//i1.adis.ws/i/canon/canon-pro-ulla-lohmann-kites-rf-zooms-1-1140?$search-result-thumb-4by3-jpg$" alt="Canon Camera" class="canon-amplience__image" />
</picture>
</div>
</div>
</div>
</div>
<div class="multi-text-accordion__group">
<button type="button" class="d-block text-start w-100 accordion__button multi-text-accordion__button px-3 py-3 canon-paragraph--medium position-relative">
Eighth benefit for exploring
</button>
<div class="accordion__collapsable multi-text-accordion__collapsable">
<div class="multi-text-accordion__content text-start text-md-center">
<h3 class="canon-section-title--small canon-mb-xxs">Long title spans over two lines pushes the body down</h3>
<p class="canon-paragraph--medium canon-mb-xxxs"> Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
<div class="text-center">
<a href="#" class="button button--blue button--medium canon-mb-xxs">Normal text</a>
</div>
<div class="position-relative">
<picture class="canon-amplience">
<source srcset="//i1.adis.ws/i/canon/canon-pro-ulla-lohmann-kites-rf-zooms-1-1140?$search-result-thumb-4by3$" media="(min-width: 1472px)" class="canon-amplience__image" />
<source srcset="//i1.adis.ws/i/canon/canon-pro-ulla-lohmann-kites-rf-zooms-1-1140?$search-result-thumb-4by3$" media="(min-width: 1200px)" class="canon-amplience__image" />
<source srcset="//i1.adis.ws/i/canon/canon-pro-ulla-lohmann-kites-rf-zooms-1-1140?$search-result-thumb-4by3$" media="(min-width: 769px)" class="canon-amplience__image" />
<source srcset="//i1.adis.ws/i/canon/canon-pro-ulla-lohmann-kites-rf-zooms-1-1140?$search-result-thumb-4by3$" media="(min-width: 0)" class="canon-amplience__image" />
<img src="//i1.adis.ws/i/canon/canon-pro-ulla-lohmann-kites-rf-zooms-1-1140?$search-result-thumb-4by3-jpg$" srcset="//i1.adis.ws/i/canon/canon-pro-ulla-lohmann-kites-rf-zooms-1-1140?$search-result-thumb-4by3-jpg$" alt="Canon Camera" class="canon-amplience__image" />
</picture>
</div>
</div>
</div>
</div>
<div class="multi-text-accordion__group multi-text-accordion__group-disabled">
<button type="button" class="d-flex justify-content-between text-start w-100 multi-text-accordion__button px-3 py-3 canon-paragraph--medium position-relative">
Live ambassador classes
<span class="multi-text-accordion__button-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="10" height="13.096">
<path d="M1.344 5.311v-1.67a4.943 4.943 0 01.048-.671 3.351 3.351 0 01.761-1.684 3.536 3.536 0 015.212-.259 3.452 3.452 0 011.053 2.58c0 .523 0 1.045.006 1.568v.152h.3A1.219 1.219 0 0110 6.607v5.243a1.214 1.214 0 01-1.015 1.23 1.562 1.562 0 01-.268.016H1.293a1.215 1.215 0 01-1.292-1.3V6.577a1.212 1.212 0 01.942-1.216 3.754 3.754 0 01.401-.05zm5.774.011v-.143q0-.8-.008-1.6a2.423 2.423 0 00-.008-.293 2.234 2.234 0 00-4.454.268c-.006.559 0 1.119 0 1.678 0 .031.005.062.009.1zm-2.335 5.605h.547v-.148-1.248a.148.148 0 01.1-.157.735.735 0 00.423-.655.764.764 0 00-.381-.72.794.794 0 00-1.082.263.774.774 0 00.3 1.111.149.149 0 01.1.157v1.26z" fill="currentColor" />
</svg>
</span>
</button>
<div class="accordion__collapsable multi-text-accordion__collapsable">
<div class="multi-text-accordion__content text-start text-md-center">
<h3 class="canon-section-title--small canon-mb-xxs">Long title spans over two lines pushes the body down</h3>
<p class="canon-paragraph--medium canon-mb-xxxs"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt nobis quam quod.
</p>
<div class="text-center">
<a href="#" class="button button--blue button--medium canon-mb-xxs">Normal text</a>
</div>
</div>
</div>
</div>
<div class="multi-text-accordion__group multi-text-accordion__group-disabled">
<button type="button" class="d-flex justify-content-between text-start w-100 multi-text-accordion__button px-3 py-3 canon-paragraph--medium position-relative">
121 ambassador classes
<span class="multi-text-accordion__button-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="10" height="13.096">
<path d="M1.344 5.311v-1.67a4.943 4.943 0 01.048-.671 3.351 3.351 0 01.761-1.684 3.536 3.536 0 015.212-.259 3.452 3.452 0 011.053 2.58c0 .523 0 1.045.006 1.568v.152h.3A1.219 1.219 0 0110 6.607v5.243a1.214 1.214 0 01-1.015 1.23 1.562 1.562 0 01-.268.016H1.293a1.215 1.215 0 01-1.292-1.3V6.577a1.212 1.212 0 01.942-1.216 3.754 3.754 0 01.401-.05zm5.774.011v-.143q0-.8-.008-1.6a2.423 2.423 0 00-.008-.293 2.234 2.234 0 00-4.454.268c-.006.559 0 1.119 0 1.678 0 .031.005.062.009.1zm-2.335 5.605h.547v-.148-1.248a.148.148 0 01.1-.157.735.735 0 00.423-.655.764.764 0 00-.381-.72.794.794 0 00-1.082.263.774.774 0 00.3 1.111.149.149 0 01.1.157v1.26z" fill="currentColor" />
</svg>
</span>
</button>
<div class="accordion__collapsable multi-text-accordion__collapsable">
<div class="multi-text-accordion__content text-start text-md-center">
<h3 class="canon-section-title--small canon-mb-xxs">Long title spans over two lines pushes the body down</h3>
<p class="canon-paragraph--medium canon-mb-xxxs"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, nostrum.
</p>
<div class="text-center">
<a href="#" class="button button--blue button--medium canon-mb-xxs">Normal text</a>
</div>
</div>
</div>
</div>
<div class="multi-text-content__legend mt-3 mt-md-5 mb-3">
<div class="multi-text-content__legend-line">
<span class="multi-text-content__legend-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="10" height="13.096">
<path d="M1.344 5.311v-1.67a4.943 4.943 0 01.048-.671 3.351 3.351 0 01.761-1.684 3.536 3.536 0 015.212-.259 3.452 3.452 0 011.053 2.58c0 .523 0 1.045.006 1.568v.152h.3A1.219 1.219 0 0110 6.607v5.243a1.214 1.214 0 01-1.015 1.23 1.562 1.562 0 01-.268.016H1.293a1.215 1.215 0 01-1.292-1.3V6.577a1.212 1.212 0 01.942-1.216 3.754 3.754 0 01.401-.05zm5.774.011v-.143q0-.8-.008-1.6a2.423 2.423 0 00-.008-.293 2.234 2.234 0 00-4.454.268c-.006.559 0 1.119 0 1.678 0 .031.005.062.009.1zm-2.335 5.605h.547v-.148-1.248a.148.148 0 01.1-.157.735.735 0 00.423-.655.764.764 0 00-.381-.72.794.794 0 00-1.082.263.774.774 0 00.3 1.111.149.149 0 01.1.157v1.26z" fill="currentColor" />
</svg>
</span>
<span class="canon-paragraph--large">Unlock Creating Benefits</span>
</div>
</div>
<a href="//google.co.uk" class="canon-link canon-link--medium canon-link--grey-darkest canon-link--fwd">
Review one of Your Products
<span class="canon-link--fwd-icon">
<i class="canon-icon icon-icon-right-c-t" aria-hidden="true">  </i>
</span>
</a>
</div>
<div class="bs-col-12 bs-col-md-6 d-none d-md-block">
<div class="multi-text-accordion__scene"></div>
</div>
</div>
</div>
</section>
<div id="lightbox-video" class="lightbox-template">
<div class="responsive-video__video-full-lightbox-wrapper">
<div class="responsive-video__video-element">
<div class="responsive-video__placeholder" data-account-id="640741352001" data-player-id="mACUN0fy8z" data-video-id="2888b424eec74936a94479d280390f41" controls></div>
</div>
</div>
</div>