.projects{max-width:2000px;margin-inline:auto;.filters{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin:0 0 34px;@media (max-width:767px){margin-bottom:24px}a{padding:12px 24px;background:#FFF3CE;font-size:14px;font-weight:500;line-height:1;color:#414141;transition:all .3s ease;transition-property:background-color,color;@media (max-width:767px){padding:12px 20px}&:hover,&.active{background-color:#414141;color:#fff;text-decoration:none}}}.listing{display:grid;gap:20px;grid-template-columns:1fr 1fr;[data-filter-item]{height:400px}@media (max-width:767px){grid-template-columns:1fr}@media (min-width:992px){[data-filter-item]{height:500px}}@media (min-width:1200px){grid-template-columns:506fr 264fr 132fr 132fr 506fr;grid-template-areas:"a a a b b" "c c d d d" "e e e e f" "g h h h f";grid-auto-flow:row dense;[data-filter-item]{height:512px;&:nth-child(8n+1 of :not([hidden])){grid-area:auto/a}&:nth-child(8n+2 of :not([hidden])){grid-area:auto/b}&:nth-child(8n+3 of :not([hidden])){grid-area:auto/c}&:nth-child(8n+4 of :not([hidden])){grid-area:auto/d}&:nth-child(8n+5 of :not([hidden])){grid-area:auto/e;height:300px}&:nth-child(8n+6 of :not([hidden])){grid-area:auto/f;grid-row:span 2;height:618px}&:nth-child(8n+7 of :not([hidden])){grid-area:auto/g;height:300px}&:nth-child(8n+8 of :not([hidden])){grid-area:auto/h;height:300px}}}@media (min-width:1400px){[data-filter-item]{height:640px;&:nth-child(8n+5 of :not([hidden])),&:nth-child(8n+7 of :not([hidden])),&:nth-child(8n+8 of :not([hidden])){height:376px}&:nth-child(8n+6 of :not([hidden])){height:772px}}}.project-item{width:100%;height:100%}}}