.portfolio-listings{display:flex;flex-direction:row;flex-wrap:wrap;margin-left:-.5rem;margin-right:-.5rem}.portfolio-listing__wrapper{display:flex;padding:2rem .5rem .5rem;width:100%}.portfolio-listing{background-color:#fff;border:2px solid #f1f2f2;border-radius:1rem;box-shadow:0 1px 2px rgb(16 24 40/5%);display:flex;flex-direction:column;position:relative;width:100%}.portfolio-listing__mockup{aspect-ratio:16/9;border-radius:1rem 1rem 0 0;overflow:hidden;position:relative}.postfolio-listing__mockup-monitor{left:50%;width:75%;z-index:2}.portfolio-listing__mockup-image,.postfolio-listing__mockup-monitor{height:75.5%;position:absolute;top:50%;transform:translate(-50%,-50%)}.portfolio-listing__mockup-image{background-color:#000;border-radius:.75em .75em 0 0;left:calc(50% + 1px);overflow:hidden;width:60.63%;z-index:1}.portfolio-listing__mockup-image img{animation:none;left:0;position:absolute;top:0;transform:translateY(0);width:100%;will-change:transform}.portfolio-listing:hover .portfolio-listing__mockup-image img{animation:scroll-mockup var(--scroll-duration,4s) ease-in-out}@media (prefers-reduced-motion:reduce){.portfolio-listing__mockup-image img{animation:none!important}}@keyframes scroll-mockup{0%{transform:translateY(0)}50%{transform:translateY(calc(var(--scroll-distance, 0px)*-1))}to{transform:translateY(0)}}.portfolio-listing__content{flex-grow:1;padding:1rem;width:100%}.portfolio-listing__types{margin-bottom:1rem;position:absolute;right:0;top:0;transform:translateY(-50%)}.portfolio-listing__type{background-color:#191a1b;border:1px solid #fbfcfc;border-radius:.25rem;color:#fbfcfc;font-size:.875rem;margin-right:.5rem;padding:.25rem .5rem;text-decoration:none}.portfolio-listing__client,.portfolio-listing__title{margin-bottom:.5rem}.portfolio-listing__buttons{padding:1rem}@media (min-width:768px){.portfolio-listing__wrapper{width:50%}}