Product USP with Advantage showcase

<div id="shopify-section-template--16447242272955__ac119945-9ac1-4f93-ac2f-7a3aef2dba65" c
lass="shopify-section">
 <style>
 .scrollGif {
 position: relative;

 }
 .scrollGifBackground {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 }
 .scrollGifBackground>video {
 width: 100%;
 height: 100%;
 object-fit: cover;
 }
 .scrollGifSwiper {
 /position: absolute;/
 /top: 50%;/
 /translate: 0 -50%;/
 /z-index: 2;/
 padding: 200px 0;
 width: 100%;
 }
 .scrollGifSwiper .swiper-wrapper {
 transition-timing-function: linear !important;
 -webkit-transition-timing-function: linear !important;
 }
 .scrollGifSwiper .swiper-slide {
 width: auto;
 background: transparent;
 border: none;
 height: max-content;
 box-shadow: none;
 }
 .scrollGifScrollText {
 font-size: 30px;
 font-style: normal;
 font-weight: 600;
 position: relative;
 color: #fff;
 }
 .scrollGifScrollText::before {
 content: "";
 display: inline-block;
 background-image: url("data:image/svg+xml,%3Csvg width='70' height='70' viewBo
x='0 0 70 70' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M59.0625 8.75L2
6.25 41.5625L10.9375 26.25L0 37.1875L26.25 63.4375L70 19.6875L59.0625 8.75Z' fill='%23F028
49'/%3E%3C/svg%3E%0A");
 background-repeat: no-repeat;
 background-size: contain;
 width: 45px;
 height: 45px;
 position: absolute;
 left: 0;
 top: 50%;
 translate: -80px -50%
 }
 @media (max-width: 800px) {
 .scrollGifSwiper {
 padding: 200px 0;
 }
 .scrollGifScrollText {
 font-size: 17px;
 }
 .scrollGifScrollText::before {
 width: 20px;
 height: 20px;
 translate: -30px -50%
 }
 }
 </style>
 <section id="template--16447242272955__ac119945-9ac1-4f93-ac2f-7a3aef2dba65">
 <div class="scrollGif">
 <div class="scrollGifBackground">
 <video width="100%" height="100%" autoplay="" muted="" loop="">
 <source src="https://cdn.shopify.com/s/files/1/0558/9300/0379/files/final_
60e21887ebfc8700ef60e19c_40081.mp4?v=1625430578" type="video/mp4">
 </video>
 </div>
 <div class="swiper scrollGifSwiper swiper-initialized swiper-horizontal swiper
-ios swiper-backface-hidden">
 <div class="swiper-wrapper" style="transition-duration: 10000ms; transfor
m: translate3d(-333.36px, 0px, 0px);" id="swiper-wrapper-484f27e767c67654" aria-live="of
f">
 <div class="swiper-slide swiper-slide-prev" role="group" aria-label="2
/ 3" data-swiper-slide-index="1" style="margin-right: 40px;">
 <div class="scrollGifScrollText">Block sweat and odor from 3 angle
s</div>
 </div>
 <div class="swiper-slide swiper-slide-active" role="group" aria-label
="3 / 3" data-swiper-slide-index="2" style="margin-right: 40px;">
 <div class="scrollGifScrollText">Dermatologist recommended</div>
 </div>
 <div class="swiper-slide swiper-slide-next" role="group" aria-label="1
/ 3" data-swiper-slide-index="0" style="margin-right: 40px;">
 <div class="scrollGifScrollText">Results from day one</div>
 </div>
 <div class="swiper-slide swiper-slide-prev" role
="group" aria-label="2 / 3" data-swiper-slide-index="1" style="margin-right: 40px;">
 <div class="scrollGifScrollText">Block sweat and odor from 3 angle
s</div>
 </div>
 <div class="swiper-slide swiper-slide-active" role="group" aria-label
="3 / 3" data-swiper-slide-index="2" style="margin-right: 40px;">
 <div class="scrollGifScrollText">Dermatologist recommended</div>
 </div>
 <div class="swiper-slide swiper-slide-next" role="group" aria-label="1
/ 3" data-swiper-slide-index="0" style="margin-right: 40px;">
 <div class="scrollGifScrollText">Results from day one</div>
 </div>
 </div>
 <span class="swiper-notification" aria-live="assertive" aria-atomic="tru
e"></span></div>
 </div>
 </section>
 <script>
 new Swiper(`[id="template--16447242272955__ac119945-9ac1-4f93-ac2f-7a3aef2dba65"]
.scrollGifSwiper`, {
 spaceBetween: 40,
 centeredSlides: true,
 speed: 10000,
 autoplay: {
 delay: 1,
 },
 loop: true,
 slidesPerView: 'auto',
 allowTouchMove: false,
 disableOnInteraction: true,
 breakpoints: {
 801: {
 spaceBetween: 120,
 }
 }
 });
 </script>
</div>