.project-listing{display:flex;flex-flow:column nowrap;align-items:center}.project-listing .filter-by{font-weight:500;font-size:24px;color:#4f4f4f}.project-listing .filter-arrow{display:none;margin-left:15px}.project-listing .filter-cross{display:none;margin-left:15px}.project-listing .filters{display:flex;flex-flow:row wrap;justify-content:center;margin-top:30px}.project-listing .filters .filter{transition:unset;padding:0;margin:0 15px 15px;background:0;border:0}.project-listing .filters .filter.active{font-weight:700}.project-listing .filters .filter:focus{outline:0}.project-listing .project-grid{display:grid;grid-template-columns:repeat(4,1fr);width:100%;column-gap:20px;row-gap:35px;margin-top:35px}.project-listing .project{display:flex;flex-flow:column nowrap}.project-listing .project.hidden{display:none}.project-listing .project .image-wrapper{position:relative;overflow:hidden;height:0;width:100%;padding-top:75%}.project-listing .project .image{position:absolute;width:100%;height:100%;top:0;left:0;object-fit:cover}.project-listing .project .title{text-transform:uppercase;text-align:center;font-weight:700;font-size:14px;margin-top:12px}.project-listing .project .description{text-align:center;font-style:italic;font-weight:300;font-size:14px;color:#828282;margin-top:5px}@media(max-width:1000px){.project-listing .project-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:768px){.project-listing .project-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:500px){.project-listing{position:relative}.project-listing .filter-by{padding:5px 0;min-width:250px;text-align:center;cursor:pointer}.project-listing .filter-arrow{display:unset}.project-listing .filter-by.active .filter-arrow{display:none}.project-listing .filter-by.active .filter-cross{display:unset}.project-listing .filters{display:none;flex-flow:column nowrap;justify-content:unset;position:absolute;background-color:#fafafa;min-width:250px;margin-top:43.6px;z-index:1}.project-listing .filter-by.active{background-color:#c4c4c4}.project-listing .filter-by.active ~ .filters{display:flex}.project-listing .filters .filter{border-bottom:1px solid #e5e5e5;padding:15px 0;margin:0}.project-listing .filters .filter.active{font-weight:unset;background-color:var(--color-primary);color:#fff}.project-listing .filters .filter:last-of-type{border-bottom:unset}.project-listing .project-grid{grid-template-columns:repeat(1,1fr)}}