.category-item{width:200px;height:200px;aspect-ratio:1/1;background-color:var(--surface);color:var(--primary);border-radius:40%;display:flex;justify-content:center;align-items:center;transition:.3s ease-in-out}.category-item:hover{box-shadow:0 3px 7px rgba(0,0,0,.4);scale:1.05}.category-item>img{transition:.15s ease-in-out;scale:1.01}.category-item>img:hover{scale:1.2}@media screen and (max-width:500px){.category-item{width:169px;height:169px}}.category-item{position:relative;overflow:hidden}.category-item:not(.no-image):after{content:"";position:absolute;bottom:0;left:0;width:100%;height:70px;background:linear-gradient(0deg,rgba(0,0,0,.6),transparent);opacity:0;transition:opacity .3s ease-in-out}.category-item:not(.no-image):hover:after{opacity:1}.category-item .category-name{position:absolute;bottom:15px;left:50%;transform:translateX(-50%);color:white;font-weight:700;text-align:center;width:100%;padding:0 10px;opacity:0;z-index:2}.category-item:not(.no-image):hover .category-name{animation:fadeInFromBottom .4s ease-in-out forwards}@keyframes fadeInFromBottom{0%{opacity:0;transform:translate(-50%,20px)}to{opacity:1;transform:translate(-50%)}}