.use-portfolio{---template-item-height:250px;background-color:var(--color-light);border:1px solid var(--color-border);border-radius:5px;flex-grow:1;width:30%;max-width:100%;position:relative;overflow:hidden}@media only screen and (width<=1024px){.use-portfolio{width:40%}}@media only screen and (width<=767px){.use-portfolio{width:100%}}.use-portfolio .body-wrapper{position:relative}.use-portfolio .body-wrapper .preview-icon-overlay{opacity:0;cursor:pointer;text-align:center;background-color:#00000080;align-content:center;width:100%;height:100%;transition:opacity .5s;position:absolute;top:0;left:0}.use-portfolio .body-wrapper .preview-icon-overlay span{color:var(--color-light);pointer-events:none;font-size:12px;display:block}@media screen and (width>=767px){.use-portfolio .body-wrapper .preview-icon-overlay span{opacity:0}}.use-portfolio .body-wrapper .preview-icon-overlay iconify-icon{color:var(--color-light);pointer-events:none;font-size:20px}.use-portfolio .body-wrapper .thumbnail-image{object-fit:cover;width:100%;height:100%;min-height:var(---template-item-height);max-height:var(---template-item-height);display:block}.use-portfolio .body-wrapper .badge{color:#fff;text-transform:uppercase;letter-spacing:.5px;background-color:#562dd4;padding:2px 4px;font-size:10px;display:inline-block;position:absolute;top:10px;right:10px}.use-portfolio .body-wrapper .badge.free{background-color:var(--color-heading)}.use-portfolio .body-wrapper .badge.pro{background-color:var(--color-primary)}.use-portfolio:hover .preview-icon-overlay,.use-portfolio:focus .preview-icon-overlay{opacity:1}.use-portfolio .footer-wrapper{opacity:0;background-color:var(--color-light);justify-content:space-between;align-items:center;width:100%;padding:10px;transition:all .5s;display:flex;position:absolute;bottom:0;left:0;transform:translateY(100%)}.use-portfolio .footer-wrapper button{padding:5px 15px;font-size:14px;font-weight:400}@media screen and (width>=767px){.use-portfolio:hover .footer-wrapper{opacity:1;transform:translateY(0)}}