.card{border:1px solid #0000;border-radius:20px;padding:6px;transition:all .3s ease-out}.card:hover{background-color:var(--white);box-shadow:0 4px 8px #2929290f,0 2px 4px #2929290a,0 1px 2px #2929290a,0 0 0 1px #2929290a,inset 0 -.5px .5px #29292914}.card .image{aspect-ratio:2/3;background-color:#f9f9f9;border:1px solid #dcdcdc;border-radius:16px;width:100%;max-width:400px;max-height:600px;margin:0 auto;transition:all .3s ease-out;position:relative;overflow:hidden}@media (max-width:1024px){.card .image{max-width:auto;max-height:auto}}@media (max-width:600px){.card .image{max-width:auto;max-height:auto}}.card:hover .image{background-color:var(--neutral-2);border:1px solid #cacaca}.card .image:after{content:"";opacity:0;pointer-events:none;background:linear-gradient(120deg,#fff0 0%,#fff9 50%,#fff0 100%);width:50%;height:100%;position:absolute;top:0;left:-150%;transform:skew(-25deg)}.card:hover .image:after{animation:3s forwards shine}.card .image>img{border-radius:16px;transition:all .3s ease-out;transform:scale(1)}.card:hover .image>img{transform:scale(1.05)}.card-content{padding:12px;transition:all .3s ease-out}@keyframes shine{0%{opacity:1;left:-150%}50%{opacity:1;left:150%}to{opacity:0;left:150%}}