:root{--logo-width:7em;--card-border-radius:calc(var(--logo-width) * 0.17);--logo-border-radius:calc(var(--logo-width) * 0.43);--title-font-size:calc(var(--logo-width) * 0.35);--title-font-weight:400;--logo-padding:calc(var(--logo-width) * 0.07);--logo-inner-padding:calc(var(--logo-width) * 0.07);--mobile-modal-radius:calc(var(--logo-width) * 0.214);--title-offset:1}@media screen and (min-width:1199px){:root{--logo-width:4.7em}}@media screen and (max-width:1199px){:root{--logo-width:6.5em}}@media screen and (max-width:800px){:root{--logo-width:6em}}@media screen and (max-width:480px){:root{--logo-width:4.5em}}.card-wrapper{position:relative;display:flex;aspect-ratio:1080/1920;width:100%;cursor:pointer;overflow:hidden}.card-wrapper .card-image-wrapper img{width:100%;height:100%;border-radius:var(--card-border-radius);filter:grayscale(100%);transition:filter .6s ease}.card-wrapper .card-way{position:absolute;right:0;top:0;width:var(--logo-width);height:100%}.card-wrapper .card-way .card-title{position:absolute;top:65%;left:50%;font-size:var(--title-font-size);font-weight:var(--title-font-weight);color:var(--card-text);z-index:10;transform-origin:center;transform:translate(-50%,-65%) rotate(90deg);overflow:hidden;white-space:nowrap;opacity:0;visibility:hidden}.card-wrapper .card-way .card-title span{display:inline-block;opacity:0;transform:translateY(-30px)}.card-wrapper .card-way .card-ray{position:absolute;right:0;bottom:0;background-color:var(--card-background);height:calc(var(--logo-width) - (var(--logo-width) / 2));width:100%;transition:all .8s cubic-bezier(.7,.47,.53,.74)}.card-wrapper .card-way .card-ray:before{top:calc((var(--logo-width) * -1));right:0}.card-wrapper .card-way .card-ray:before,.card-wrapper .card-way:before{content:"";position:absolute;width:calc(var(--logo-width) / 2);height:calc(var(--logo-width) / 2);background-color:transparent;border-radius:0 0 50% 0;box-shadow:calc(var(--logo-width) / 4) 0 0 var(--card-background)}.card-wrapper .card-way:before{bottom:0;right:var(--logo-width)}.card-wrapper .card-way .card-logo-wrapper{position:absolute;bottom:0;right:0;width:var(--logo-width);height:var(--logo-width);aspect-ratio:1;padding:var(--logo-padding);box-sizing:border-box;background-color:var(--card-background);border-radius:var(--logo-border-radius) 0 0;justify-content:center;align-items:center;transition:all .8s cubic-bezier(.7,.47,.53,.74)}.card-wrapper .card-way .card-logo-wrapper img{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;border-radius:50%;padding:var(--logo-inner-padding);display:flex;background-color:#f2f2f2;box-sizing:border-box}.card-wrapper:hover .card-image-wrapper img{filter:grayscale(0)}.card-wrapper:hover .card-ray{height:calc(85% - (var(--logo-width) / 2))}.card-wrapper:hover .card-logo-wrapper{bottom:calc(85% - var(--logo-width))}.card-wrapper:hover .card-title{opacity:1;visibility:visible;transition:opacity .6s ease,visibility .6s ease}.card-wrapper:hover .card-way .card-title span{opacity:1;transform:translateY(0);transition:opacity .4s ease var(--open-delay),transform .4s ease var(--open-delay)}.card-wrapper:not(:hover) .card-way .card-title{opacity:0;visibility:hidden;transition:opacity .2s ease .55s,visibility .2s ease .55s}.card-wrapper:not(:hover) .card-way .card-title span{opacity:0;transform:translateY(30px);transition:opacity .2s ease var(--close-delay),transform .2s ease var(--close-delay)}@media screen and (max-width:768px){.card-wrapper{max-width:100%;aspect-ratio:9/16}.video-modal-content{width:95vw;height:90vh}}@media (hover:none) and (pointer:coarse){.card-wrapper{cursor:pointer}}.card-creamake-logo,.collaboration-x{opacity:0;right:0;transition:opacity .3s ease,visibility .3s ease}.card-creamake-logo{position:absolute;top:8%;left:30%;transform:translate(-50%,-50%);width:calc(var(--logo-width) * 1.2);z-index:10;opacity:0}.card-creamake-logo img{width:100%;height:auto;object-fit:contain}.collaboration-x{position:absolute;top:0;right:-100px;display:flex;align-items:center;justify-content:center}.collaboration-x svg{width:20px;height:20px}.card-wrapper:hover .card-creamake-logo,.card-wrapper:hover .collaboration-x{opacity:1;transition:opacity .3s ease,visibility .3s ease}@media screen and (max-width:800px){.card-wrapper .card-image-wrapper img{filter:grayscale(0)!important}.card-wrapper .card-ray{height:calc(85% - (var(--logo-width) / 2))!important}.card-wrapper .card-logo-wrapper{bottom:calc(85% - var(--logo-width))!important}.card-wrapper .card-title{opacity:1!important;transition:opacity .6s ease,visibility .6s ease!important}.card-wrapper .card-creamake-logo,.card-wrapper .collaboration-x{opacity:1;transition:opacity .3s ease,visibility .3s ease}.card-wrapper .card-way .card-title{opacity:1!important;visibility:visible!important}.card-wrapper .card-way .card-title span{opacity:1!important;transform:translateY(0)!important}}