section.MobileStories{display:flex;justify-content:center;align-items:center;flex-direction:column;row-gap:24px;padding:50px 0}section.MobileStories h2{font-size:18px;color:var(--blue)}.MobileStories>div{width:900px;position:relative}.MobileStoriesSwiper#swiper_MobileStories{width:100%;display:flex;align-items:center;overflow-y:visible}.mobileStories__card-wrapper.swiper-wrapper{height:370px}section.MobileStories .swiper-pagination{top:unset;bottom:-2rem}section.MobileStories .swiper-pagination .swiper-pagination-bullet{background-color:#ccc;width:2.5rem;border-radius:2px;height:.2rem}section.MobileStories .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{background-color:#666}.mobileStories__card{background-color:#000;height:100%;border-radius:8px;padding:15px;color:#fff;display:flex;flex-direction:column;justify-content:space-between;background-position:center;background-repeat:no-repeat;background-size:cover;position:relative;overflow:hidden;transition:all .45s ease;box-shadow:0 4px 6px #0000001a}.mobileStories__card:hover{transform:translateY(-10px);box-shadow:0 10px 20px #0003}.mobileStories__card img{border-radius:100%;padding:2px;width:40px;border:2px solid var(--blue);position:relative;z-index:2}.mobileStories__card p{position:relative;z-index:2}.mobileStories__card-overlay{background-color:var(--black);opacity:.2}.mobileStories__btn{z-index:10;position:absolute;background-color:#f2f2f2;width:60px;height:60px;border-radius:100%;color:#acacac;cursor:pointer;transition:all .5s ease-in-out}.mobileStories__btn:hover{color:#595959;background-color:#e5e5e5}.mobileStories__btn.right{right:-80px}.mobileStories__btn.left{left:-80px}.mobileStories__btn.right:hover{transform:translate(6px)}.mobileStories__btn.left:hover{transform:translate(-6px)}@media only screen and (min-width: 991px) and (max-width: 1250px){.mobileStories__btn.right{right:-40px}.mobileStories__btn.left{left:-40px}}@media only screen and (max-width: 991px){.mobileStories__card:hover{transform:translateY(0)}.MobileStories>div{width:90vw}.mobileStories__card-wrapper.swiper-wrapper{height:260px}.mobileStories__btn.right{right:-24px}.mobileStories__btn.left{left:-24px}}@media only screen and (max-width: 768px){section.mobileStories{padding:0 0 50px}section.mobileStories h2{margin-top:0}.mobileStories__card-wrapper.swiper-wrapper{height:600px;gap:0}.mobileStories__card{height:calc((100% - 50px)/2)}.mobileStories__btn{display:none}}
