.box,.fav-box{position:relative;width:409px;height:409px;background-color:transparent}.box img,.fav-box img{border-radius:1rem}.fav-box{width:260px;height:270px}.bottom-layer,.top-layer{width:100%;height:20%;position:absolute;bottom:0;left:0;opacity:0;display:flex;justify-content:center;align-items:center}.top-layer{transition:transform .6s ease-in-out,opacity .6s ease-in-out;background-color:#61a36a}.bottom-layer{transition:transform .5s ease-in-out,opacity .5s ease-in-out;background-color:#6f6fad}@media (max-width:1023px){.box,.fav-box{width:100%;height:100%}.top-layer{transform:translateY(-50%)}.bottom-layer{transform:translateY(50%)}.box:hover .bottom-layer{opacity:.6;transform:translateY(0)}}@media (min-width:1024px){.top-layer{transform:translateY(-300%)}.bottom-layer{transform:translateY(10%)}.box:hover .bottom-layer,.box:hover .top-layer,.fav-box:hover .bottom-layer{opacity:.6;transform:translateY(0)}}