@layer components{.project-card{position:relative;overflow:hidden}.project-info-card{width:90%;background-color:var(--color-white);padding:1.5rem 1rem;box-shadow:0 8px 24px rgba(0,0,0,.15);border-radius:1rem;position:absolute;bottom:-9rem;left:0;right:0;margin-inline:auto;opacity:0;transition:opacity 1s 1s}.project-card:hover .project-info-card{animation:show-data 1s forwards;opacity:1;transition:opacity .3s}.project-card:hover img{opacity:.5;transition:opacity .3s}.project-card:hover{animation:remove-overflow 2s forwards}.project-card:not(:hover){animation:show-overflow 2s forwards}.project-card:not(:hover) .project-info-card{animation:remove-data 1s forwards}@keyframes show-data{50%{transform:translateY(-10rem)}to{transform:translateY(-7rem);z-index:10}}@keyframes remove-overflow{to{overflow:initial}}@keyframes remove-data{0%{transform:translateY(-7rem)}50%{transform:translateY(-10rem)}to{transform:translateY(.5rem)}}@keyframes show-overflow{0%{overflow:initial;pointer-events:none}50%{overflow:hidden}}}