.example_static_module{padding:30px;background-color:#ecf4f7}.example_static_module__inner{display:flex;flex-wrap:wrap;align-items:center;position:relative}.example_static_module__image{flex:0 0 50%;max-width:50%;padding-right:20px}.example_static_module__content-container{flex:0 0 50%;max-width:50%;padding-left:20px}.example_static_module__summary{margin:10px 0;font-size:14px;line-height:1.5;color:#666;background-color:#f8f9fa;padding:15px;border-radius:4px;border-left:3px solid #007cba}



.movie-cards-container *,.movie-cards-container *::before,.movie-cards-container *::after{box-sizing:border-box}.movie-cards-container{padding:40px 20px}.movie-cards-wrapper{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:500px;color:#fff;position:relative}.movie-cards-wrapper .credit{position:absolute;bottom:20px;left:20px;color:inherit;font-size:.9rem;z-index:100}.movie-cards-wrapper .options{display:flex;flex-direction:row;align-items:stretch;overflow:visible;width:100%;height:700px;gap:10px}.movie-cards-wrapper .option{position:relative;overflow:visible;min-width:90px;cursor:pointer;transition:.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);flex-grow:1;border-radius:50px;perspective:1000px}.movie-cards-wrapper .option:hover:not(.active){transform:scale(1.02)}.movie-cards-wrapper .option-inner{position:relative;width:100%;height:100%;transition:transform .8s;transform-style:preserve-3d;border-radius:inherit}.movie-cards-wrapper .option.flipped .option-inner{transform:rotateY(180deg)}.movie-cards-wrapper .option-front,.movie-cards-wrapper .option-back{position:absolute;width:100%;height:100%;backface-visibility:hidden;border-radius:inherit;overflow:hidden}.movie-cards-wrapper .option-front{background:var(--optionBackground, var(--defaultBackground, #e6e9ed));background-size:cover;background-position:center}.movie-cards-wrapper .option-back{background-size:cover;background-position:center;transform:rotateY(180deg);padding:30px;overflow-y:auto;backdrop-filter:blur(5px)}.option-back *{position:relative;z-index:2;color:#fff !important}.option-back::before{content:"";position:absolute;inset:0;background-image:var(--optionBackground);background-size:cover;background-position:center;filter:blur(8px) brightness(0.5);z-index:1;border-radius:inherit}.movie-cards-wrapper .option-back h2{margin-bottom:15px;font-size:50px;color:#fff !important;font-weight:bold}.movie-cards-wrapper .option-back .rating{display:flex;align-items:center;gap:10px;margin-bottom:15px;font-size:20px;color:#fff !important}.movie-cards-wrapper .option-back .rating i{color:gold !important}.movie-cards-wrapper .option-back .overview{line-height:1.6;color:#fff !important;margin:45px 0;font-size:25px}.movie-cards-wrapper .option-back .details{display:flex;flex-direction:column;gap:30px;font-size:25px;color:#fff !important}.movie-cards-wrapper .option-back .details strong{color:#fff !important}.movie-cards-wrapper .option.active{flex-grow:10000;border-radius:40px;transform:none !important}.movie-cards-wrapper .option.active .option-front{background-size:cover}.movie-cards-wrapper .option.active .shadow{box-shadow:inset 0 -120px 120px -120px #000,inset 0 -120px 120px -100px #000}.movie-cards-wrapper .option.active .label{bottom:20px;left:20px}.movie-cards-wrapper .option.active .label .info>div{left:0px;opacity:1}.movie-cards-wrapper .option:not(.active) .shadow{bottom:-40px;box-shadow:inset 0 -120px 0px -120px #000,inset 0 -120px 0px -100px #000}.movie-cards-wrapper .option:not(.active) .label{bottom:10px;left:25px}.movie-cards-wrapper .option:not(.active) .label .info>div{left:20px;opacity:0}.movie-cards-wrapper .shadow{position:absolute;bottom:0px;left:0px;right:0px;height:120px;transition:.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);pointer-events:none}.movie-cards-wrapper .label{display:flex;position:absolute;right:0px;height:40px;transition:.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);pointer-events:none}.movie-cards-wrapper .label .icon{display:flex;justify-content:center;align-items:center;min-width:40px;max-width:40px;height:40px;border-radius:100%;background-color:#fff;color:red}.movie-cards-wrapper .label .info{display:flex;flex-direction:column;justify-content:center;margin-left:10px;color:#fff;white-space:pre}.movie-cards-wrapper .label .info>div{position:relative;transition:.5s cubic-bezier(0.05, 0.61, 0.41, 0.95),opacity .5s ease-out;color:#fff !important}.movie-cards-wrapper .label .info .main{font-weight:bold;font-size:1.2rem;color:#fff !important}.movie-cards-wrapper .label .info .sub{transition-delay:.1s;color:#ccc !important}@media screen and (max-width: 768px){.movie-cards-wrapper{padding:20px 15px;min-height:100vh}.movie-cards-wrapper .options{flex-direction:column;width:100%;max-width:100%;height:auto;min-height:auto;gap:15px}.movie-cards-wrapper .option{min-height:90px;height:90px;width:100%;border-radius:50px;flex-grow:0;flex-shrink:0}.movie-cards-wrapper .option.active{flex-grow:0;flex-shrink:0;height:400px;min-height:400px;max-width:100%;border-radius:30px}.movie-cards-wrapper .option.active .shadow{box-shadow:inset 0 -80px 80px -80px #000,inset 0 -80px 80px -60px #000}.movie-cards-wrapper .option:not(.active) .shadow{height:80px;box-shadow:inset 0 -80px 0px -80px #000,inset 0 -80px 0px -60px #000}.movie-cards-wrapper .shadow{height:80px}.movie-cards-wrapper .option.active .label{bottom:15px;left:15px}.movie-cards-wrapper .option:not(.active) .label{bottom:25px;left:10px}.movie-cards-wrapper .option-back{padding:20px}.movie-cards-wrapper .option-back h2{font-size:1.3rem;margin-bottom:10px}.movie-cards-wrapper .option-back .rating{font-size:1rem;margin-bottom:10px}.movie-cards-wrapper .option-back .overview{font-size:.9rem;margin-bottom:12px;line-height:1.5}.movie-cards-wrapper .option-back .details{font-size:.85rem;gap:6px}.movie-cards-wrapper .label .info .main{font-size:1rem}.movie-cards-wrapper .label .info .sub{font-size:.85rem}.movie-cards-wrapper .label .icon{min-width:35px;max-width:35px;height:35px}}@media screen and (max-width: 480px){.movie-cards-wrapper{padding:15px 10px}.movie-cards-wrapper .options{gap:12px}.movie-cards-wrapper .option{min-height:60px;height:60px;border-radius:40px}.movie-cards-wrapper .option:not(.active) .label{bottom:7px;left:10px}.movie-cards-wrapper .option.active{height:350px;min-height:350px;border-radius:25px}.movie-cards-wrapper .option-back{padding:15px}.movie-cards-wrapper .option-back h2{font-size:1.2rem}.movie-cards-wrapper .option-back .overview{font-size:.85rem}.movie-cards-wrapper .label .info .main{font-size:.9rem}.movie-cards-wrapper .label .info .sub{font-size:.8rem}.movie-cards-wrapper .label .icon{min-width:32px;max-width:32px;height:32px;font-size:.9rem}}