#window-of-draggable{height:100vh;min-height:100vh;width:100vw;min-width:100vw;background-color:#1d1d1d;position:relative;overflow:hidden}#bounding-box{min-height:100%;min-width:100%}#portfolio-grid-wrapper{width:100vw;height:100vh;overflow:hidden;position:relative;opacity:0;display:flex;justify-content:center;align-items:center;z-index:10!important}#portfolio-grid-container{height:fit-content;width:fit-content;display:grid;grid-template-rows:repeat(1, 1fr);grid-template-columns:repeat(4, 1fr);grid-auto-rows:1fr;justify-content:center}.project-card{grid-row:span 1;grid-column:span 1;width:calc((100vw / 3.6) * 1.35);height:calc(100vw / 3.6);padding:1rem}.project-card-inner{background-color:#121212;width:100%;height:100%;display:flex;justify-content:center;align-items:center;color:#fff;font-size:2rem;text-transform:uppercase;position:relative;overflow:hidden}.project-card-bg{position:absolute;top:50%;left:50%;transform:translateX(-50%) translateY(-50%);width:100%;height:100%;background-image:url('/wp-content/uploads/2022/04/Hero-G.jpg');background-position:center;background-size:cover;z-index:1;transition:all 0.2s ease-in-out}.project-card-bg::after{content:"";height:200%;width:200%;background-color:rgba(0, 0, 0, 0.2);position:absolute;top:50%;left:50%;transform:translateX(-50%) translateY(-50%);transition:all 0.2s ease-in-out}.project-card-title{z-index:2;overflow:hidden;width:unset!important;color:#fff;font-weight:bolder!important}.project-card:hover .project-card-bg{transform:translateX(-50%) translateY(-50%) scale(1.02);cursor:pointer}.project-card:hover .project-card-bg::after{background-color:rgba(0, 0, 0, 0.7)}@media screen and (max-width: 1100px){#window-of-draggable{display:flex;justify-content:center;align-items:center}#bounding-box{display:flex;align-items:center;justify-content:center}#portfolio-grid-container{grid-template-columns:repeat(4, 1fr)}.project-card{width:calc((100vw / 2.8) * 1.35);height:calc(100vw / 2.8)}}@media screen and (max-width: 849px){#portfolio-grid-container{grid-template-columns:repeat(1, 1fr)}#window-of-draggable{height:unset;min-height:unset;padding-top:100px}#portfolio-grid-wrapper{height:unset;opacity:1}.project-card{width:calc((70vw) * 1.35);height:calc(70vw)}.project-card-bg::after{background-color:rgba(0, 0, 0, 0.5)}h2.project-card-title{font-size:18px!important;text-align:center}}@media screen and (max-width: 549px){.project-card{padding:0.5rem;width:calc((70vw) * 1.35);height:calc(70vw)}.project-card:hover .project-card-bg{cursor:unset}.project-card:hover .project-card-bg::after{background-color:transparent}}