.orbit-wrapper{background-color:#000;box-sizing:border-box;overflow:hidden;padding:40px 20px;width:100%}.orbit,.orbit-wrapper{align-items:center;display:flex;justify-content:center}.orbit{border-radius:0;height:var(--orbit-size);margin:0 auto;max-width:100%;position:relative;width:var(--orbit-size);--orbit-size:min(800px,90vw);--orbit-item-scale:0.8;--ring-size:3px;--ring-color:rgba(75,75,75,.5);--ring-color-gradient:rgba(109,46,255,.6) 6.7%,rgba(158,122,255,.35) 20.8%,rgba(254,139,187,.7) 34.9%,rgba(255,189,122,.6) 49.99%;--ring-opacity:1;--ring-delay:15deg;--ring-speed:80s;--item-center-size:calc(var(--orbit-size)*0.2);--item-size:calc(var(--orbit-size)*0.15);--item-color-bg:linear-gradient(0deg,#2f2f32,#3f3f3f);--item-color-border:#595959;--item-speed:80s;--item-grayscale:0}.orbit img{filter:grayscale(var(--item-grayscale));height:auto;max-width:90%;object-fit:contain;width:100%}.orbit>.center{align-items:center;background:var(--item-color-bg);border:1px solid var(--item-color-border);border-radius:50%;display:flex;height:var(--item-center-size);justify-content:center;position:absolute;width:var(--item-center-size);z-index:2}.orbit .rings{animation:rotate-rings var(--ring-speed) linear infinite;height:100%;left:0;position:absolute;top:0;width:100%;will-change:transform}.orbit .ring{--ring-no:0;--ring-radius:0;border-radius:50%;height:calc(var(--ring-radius)*2);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%) rotate(calc(var(--ring-no)*var(--ring-delay)));width:calc(var(--ring-radius)*2)}.orbit .ring:before{background:conic-gradient(var(--ring-color-gradient),var(--ring-color) 50%) border-box;border:var(--ring-size) solid transparent;border-radius:inherit;content:"";height:100%;left:0;-webkit-mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;position:absolute;top:0;width:100%}.orbit .items{animation:rotate-items var(--item-speed) linear infinite;height:calc(var(--orbit-size)*var(--orbit-item-scale));left:50%;top:50%;transform:translateX(-50%) translateY(-50%);width:calc(var(--orbit-size)*var(--orbit-item-scale))}.orbit .item,.orbit .items{position:absolute;will-change:transform}.orbit .item{align-items:center;animation:rotate-item var(--item-speed) linear infinite;background:var(--item-color-bg);border:1px solid var(--item-color-border);border-radius:50%;display:flex;height:var(--item-size);justify-content:center;width:var(--item-size);z-index:1}@keyframes rotate-rings{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes rotate-items{0%{transform:translateX(-50%) translateY(-50%) translateZ(0) rotate(0turn)}to{transform:translateX(-50%) translateY(-50%) translateZ(0) rotate(-1turn)}}@keyframes rotate-item{0%{transform:translateZ(0) rotate(0turn)}to{transform:translateZ(0) rotate(1turn)}}@media (max-width:1024px){.orbit{--orbit-size:min(700px,85vw)}}@media (max-width:768px){.orbit-wrapper{padding:20px 10px}.orbit{--orbit-size:min(500px,90vw);--item-size:calc(var(--orbit-size)*0.14);--orbit-item-scale:0.85;--item-center-size:calc(var(--orbit-size)*0.18)}}@media (max-width:480px){.orbit-wrapper{padding:10px 5px}.orbit{--orbit-size:min(300px,95vw);--item-size:calc(var(--orbit-size)*0.16);--item-center-size:calc(var(--orbit-size)*0.22);--orbit-item-scale:0.9}}