.container { padding: 0rem 0.1rem 0.1rem 0.1rem; // background-image: url("/home/provid_container_bg.webp"); background-size: 100% 100%; position: relative; .left { will-change: transform; position: absolute; left: 0; top: 40%; padding: 0.1rem; color: #d76bff; animation: transformL 1s linear infinite; } .right { will-change: transform; position: absolute; right: 0; top: 40%; padding: 0.1rem; color: #d76bff; animation: transformR 1s linear infinite; } } .privoderBox { // display: grid; // grid-template-columns: repeat(3, 1fr); // grid-gap: 0.1rem; // grid-column: 0.1rem; } .manufactureritem { // background-image: url("/home/provid_bg.webp"); // background-size: 100% 100%; // height: 0.8rem; aspect-ratio: 1/1; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #22252f; border-radius: 0.06rem; .providerIcon { // width: 0.5rem; // position: relative; // top: 0.04rem; height: 50%; } .providerText { position: relative; top: -0.08rem; } // &:global(.swiper-slide-active) { // background-image: url("/home/provid_bg_active.webp"); // position: relative; // top: -0.04rem; // .providerIcon { // top: 0.04rem; // } // .providerText { // top: -0.04rem; // } // } } @keyframes transformR { 0% { transform: translate3d(1px, -50%, 1px); } 90% { transform: translate3d(10px, -50%, 1px); } 100% { transform: translate3d(1px, -50%, 1px); } } @keyframes transformL { 0% { transform: translate3d(1px, -50%, 1px) rotate(180deg); } 90% { transform: translate3d(-10px, -50%, 1px) rotate(180deg); } 100% { transform: translate3d(1px, -50%, 1px) rotate(180deg); } }