@property --rotate{syntax: "<angle>"; initial-value: 132deg; inherits: false;}:root{--card-height: 20vh;--card-width: 30vh}.card{background:#243368;width:var(--card-width);height:var(--card-height);position:relative;border-radius:10px;justify-content:flex-start;align-items:center;text-align:center;display:flex}.text-container{position:absolute;left:5px;top:-3px;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:4px;filter:drop-shadow(1px 1px 2px #e30613);transition:all .4s cubic-bezier(.25,.8,.25,1)}.catalog-name,.featured-text{color:#fff;text-shadow:1px 1px 3px rgba(0,0,0,.5);transition:all .4s cubic-bezier(.25,.8,.25,1);margin:0;line-height:1.2;filter:drop-shadow(1px 1px 20px #e30613);text-align:left;width:100%}.catalog-name.large{font-size:1.3em;font-weight:700;order:1}.catalog-name.small{font-size:1em;font-weight:400;order:2}.featured-text.large{font-size:1em;font-weight:700;order:1}.featured-text.small{font-size:.8em;font-weight:400;order:2}.card:hover .text-container{transform:translateY(10%)}.featured-image{height:103%;flex:1;object-fit:cover;object-position:right;border-radius:8px}.card:after{position:absolute;content:"";top:calc(var(--card-height) / 6);left:0;right:0;z-index:-1;height:100%;width:100%;margin:0 auto;transform:scale(.8);filter:blur(calc(var(--card-height) / 6));background-image:linear-gradient(var(--rotate),#004aba,#243368 43%,#e30613);opacity:1;transition:opacity .5s;animation:spin 2.5s linear infinite}@keyframes spin{0%{--rotate: 0deg}to{--rotate: 360deg}}.featured-icon{position:absolute;bottom:-27px;right:-20px;width:60px;height:60px;filter:drop-shadow(2px 2px 20px #004aba);animation:wiggle 2.5s ease-in-out infinite}@media (max-width: 768px){:root{--card-height: 10vh;--card-width: 30vw}.card{margin-top:-20px}.catalog-name.large{font-size:.8em}.featured-text.large{font-size:.7em}.catalog-name.small,.featured-text.small{font-size:.5em}.text-container{left:auto;right:10px;align-items:flex-end}.featured-icon{position:absolute;bottom:-15px;right:-10px;width:30px;height:30px;filter:drop-shadow(2px 2px 20px #004aba);animation:wiggle 2.5s ease-in-out infinite}}@keyframes wiggle{0%,to{transform:rotate(0)}25%{transform:rotate(5deg)}75%{transform:rotate(-5deg)}}
