@layer components{.home-illustration{--grid-size:calc(100% / 16.6);--card-title-bar-height:18px;isolation:isolate;justify-content:center;align-items:center;width:100%;height:100%;display:flex}.home-illustration__inner{aspect-ratio:1;width:80%;position:relative}.home-illustration__inner:before,.home-illustration__inner:after{content:"";border-image:radial-gradient(circle, transparent, var(--blue) 55%, var(--magenta) 75%, transparent) 1;opacity:.5;position:absolute}.home-illustration__inner:before{border-left:1px solid;border-right:1px solid;width:80%;height:100%;top:0;left:10%}.home-illustration__inner:after{border-top:1px solid;border-bottom:1px solid;width:100%;height:80%;top:10%;left:0}.home-illustration__background{background:var(--gradient);filter:blur(40px);opacity:.55;border-radius:10%;width:70%;height:70%;position:absolute;top:15%;left:15%}.home-illustration__grid{background:repeating-linear-gradient(0deg, transparent, transparent var(--grid-size), var(--magenta) var(--grid-size), var(--magenta) calc(var(--grid-size) + 1px)), repeating-linear-gradient(90deg, transparent, transparent var(--grid-size), var(--magenta) var(--grid-size), var(--magenta) calc(var(--grid-size) + 1px));opacity:.1;width:80%;height:80%;position:absolute;top:10%;left:10%}.home-illustration__cards{--offset-x:0px;--offset-y:1px;z-index:1;width:80%;height:80%;margin-top:10%;margin-left:10%;position:relative}.home-illustration__card{width:calc(var(--grid-size) * 11.61);height:calc(var(--grid-size) * 7.35);top:calc(var(--grid-size) + var(--grid-size) + (var(--grid-size) * var(--index)) + (var(--offset-y) * var(--index)));left:calc(var(--grid-size) * var(--index) + var(--offset-x) * var(--index));background-color:var(--grey-100);border:var(--layout-border);box-shadow:var(--shadow-300);opacity:.9;transition:transform .24s var(--transition-easing);animation:3s ease-in-out infinite floating-card;animation-delay:calc(var(--index) * -.36s);display:flex;position:absolute;overflow:clip}@keyframes floating-card{0%{translate:0 6px}50%{translate:0 -6px}to{translate:0 6px}}.home-illustration__card:before{content:"";height:var(--card-title-bar-height);border-bottom:var(--layout-border);background-color:var(--grey-100);z-index:1;width:100%;position:absolute;left:0}.home-illustration__card:after{content:"";top:calc(var(--card-title-bar-height) / 2 - 4px);background-color:var(--grey-200);z-index:2;border-radius:50%;width:8px;height:8px;position:absolute;left:6px}.home-illustration__card--1{--index:1;--transform:translate(-40%, -100%)}.home-illustration__card--2{--index:2;--transform:translateY(100%)}.home-illustration__card--3{--index:3;--transform:translate(-65%, -15%)}.home-illustration__card--4{--index:4;--transform:translate(40%, -40%)}@media (width>=860px){.home-illustration__card--1{--transform:translate(-60%, -100%)}.home-illustration__card--3{--transform:translateX(-100%)}}.introduction__right:hover .home-illustration__card{transform:var(--transform)}.home-illustration__card--1>svg{align-self:flex-end;width:100%;height:auto}.home-illustration__card--4{--size:12px;background-image:repeating-linear-gradient(0deg, transparent, transparent var(--size), var(--grey-200) var(--size), var(--grey-200) calc(var(--size) + 1px)), repeating-linear-gradient(90deg, transparent, transparent var(--size), var(--grey-200) var(--size), var(--grey-200) calc(var(--size) + 1px))}.home-illustration__card--4>svg{margin:auto}}