:root{--folder-color:#f2f2f2;--folder-back-color:#e6e6e6;--paper-1:#e6e6e6;--paper-2:#f2f2f2;--paper-3:#fff}.folder-container{-webkit-user-select:none;user-select:none;transform-origin:50%;flex-direction:column;align-items:center;transition:transform .2s ease-out;display:inline-flex;transform:scale(1.1)}@media (min-width:640px){.folder-container{transform:scale(1.4)}}@media (min-width:768px){.folder-container{transform:scale(1.7)}}@media (min-width:1024px){.folder-container{transform:scale(2)}}.folder{cursor:pointer;width:100px;height:80px;transition:all .2s ease-in;position:relative}.folder:not(.open):hover{transform:translateY(-8px)}.folder:not(.open):hover .paper:first-child{transform:translate(-50%,-20%)rotate(-5deg)}.folder:not(.open):hover .paper:nth-child(2){transform:translate(-50%,-15%)rotate(5deg)}.folder:not(.open):hover .paper:nth-child(3){transform:translate(-50%,-25%)rotate(0)}.folder:not(.open):hover .folder__front{transform:translateY(8px)}.folder.open{transform:translateY(-8px);z-index:50!important}.folder.open .paper:first-child{transform:translate(calc(-115% + var(--magnet-x,0px)), calc(-65% + var(--magnet-y,0px))) rotateZ(-12deg)}.folder.open .paper:first-child:hover{transform:translate(calc(-115% + var(--magnet-x,0px)), calc(-65% + var(--magnet-y,0px))) rotateZ(-12deg) scale(1.08)}.folder.open .paper:nth-child(2){transform:translate(calc(15% + var(--magnet-x,0px)), calc(-65% + var(--magnet-y,0px))) rotateZ(12deg);height:85%}.folder.open .paper:nth-child(2):hover{transform:translate(calc(15% + var(--magnet-x,0px)), calc(-65% + var(--magnet-y,0px))) rotateZ(12deg) scale(1.08)}.folder.open .paper:nth-child(3){transform:translate(calc(-50% + var(--magnet-x,0px)), calc(-95% + var(--magnet-y,0px))) rotateZ(3deg);height:85%}.folder.open .paper:nth-child(3):hover{transform:translate(calc(-50% + var(--magnet-x,0px)), calc(-95% + var(--magnet-y,0px))) rotateZ(3deg) scale(1.08)}.folder.open .folder__front{transform:translateY(16px)}.folder__back{background:var(--folder-back-color);border:2px solid #161616;width:100px;height:80px;position:relative;border-radius:0!important}.folder__tab{z-index:0;background:var(--folder-back-color);width:auto;min-width:35px;max-width:90%;height:14px;font-family:var(--font-sans), sans-serif;color:#161616;text-transform:uppercase;letter-spacing:.05em;text-overflow:ellipsis;white-space:nowrap;border-top:2px solid #161616;border-left:2px solid #161616;border-right:2px solid #161616;justify-content:flex-start;align-items:center;padding:0 4px;font-size:5px;font-weight:900;display:flex;position:absolute;bottom:100%;left:-2px;overflow:hidden;border-radius:0!important}.paper{z-index:2;background:var(--paper-1);border:2px solid #161616;justify-content:center;align-items:center;width:75%;height:80%;padding:4px;transition:all .3s ease-in-out;display:flex;position:absolute;bottom:15%;left:50%;transform:translate(-50%,10%);border-radius:0!important}.paper:nth-child(2){background:var(--paper-2);width:80%;height:75%}.paper:nth-child(3){background:var(--paper-3);width:85%;height:70%}.folder__front{z-index:3;background:var(--folder-color);transform-origin:bottom;border:2px solid #161616;width:calc(100% + 4px);height:calc(100% + 4px);transition:all .3s ease-in-out;position:absolute;top:-2px;left:-2px;border-radius:0!important}.folder__cover-img{filter:grayscale()contrast(1.15)brightness(.92);transition:filter .35s ease-in-out}.folder:hover .folder__cover-img{filter:grayscale(0%)contrast()brightness()}