.site-content .filters{display:flex;flex-wrap:wrap;padding:0;margin-block:2em;gap:var(--portfolio-gutter)}.site-content .filters li{position:relative;border-bottom:3px solid var(--border-color)}.site-content .filters li:before{display:none}.site-content .filters .filter{position:relative;display:block;padding:15px;font-size:13px;line-height:15px;text-transform:uppercase;text-decoration:none;font-weight:600}.site-content .filters .filter:before{position:absolute;display:block;left:50%;top:100%;transform:translateX(-50%) scaleX(0);width:100%;height:3px;transition:transform .3s;background-color:var(--accent-color);content:""}.site-content .filters .filter:hover,.site-content .filters .filter:focus{color:var(--accent-color)}.site-content .filters .filter.active{color:var(--accent-color)}.site-content .filters .filter.active:before{transform:translateX(-50%) scaleX(1)}.site-content .portfolio{--column-count: var(--portfolio-column-count-mobile);display:grid;grid-gap:var(--portfolio-gutter);grid-row-gap:calc(2 * var(--portfolio-gutter));grid-template-columns:repeat(var(--column-count), 1fr);padding:0}.site-content .portfolio .portfolio-item{display:flex;flex-direction:column;position:relative;box-sizing:border-box;margin:0;transition:all .3s;transition-delay:position .3s}.site-content .portfolio .portfolio-item:before{display:none}.site-content .portfolio .portfolio-item.hidden{transform:scale(0);opacity:0;position:absolute;transition-delay:position 0s}.site-content .portfolio .portfolio-item .portfolio-item-thumbnail{display:block;margin-bottom:30px;flex-shrink:0}.site-content .portfolio .portfolio-item .portfolio-item-thumbnail img{display:block;max-width:100%;height:auto}.site-content .portfolio .portfolio-item .portfolio-item-info{height:100%;display:flex;flex-direction:column;justify-content:space-between}.site-content .portfolio .portfolio-item .more{margin-bottom:0;font-size:16px}.site-content .portfolio .portfolio-item .more a{text-decoration:none;color:var(--main-color);font-weight:var(--bold-weight)}.site-content .portfolio .portfolio-item .more a svg{width:22px;height:auto;margin-left:20px}.site-content .portfolio .portfolio-item .more a path{fill:var(--text-color);transition:fill .3s}.site-content .portfolio .portfolio-item .more a:hover,.site-content .portfolio .portfolio-item .more a:focus{color:var(--accent-color)}.site-content .portfolio .portfolio-item .more a:hover path,.site-content .portfolio .portfolio-item .more a:focus path{fill:currentcolor}.site-content .portfolio .portfolio-item .portfolio-item-title{margin:0 0 30px;font-size:25px;line-height:1.25em;font-weight:var(--bold-weight)}.site-content .portfolio .portfolio-item .portfolio-item-title a{color:var(--text-color);text-decoration:none}.site-content .portfolio .portfolio-item .portfolio-item-title a:hover,.site-content .portfolio .portfolio-item .portfolio-item-title a:focus{color:var(--accent-color)}@media(min-width: 600px){.site-content .portfolio{margin-top:60px}}@media(min-width: 900px){.site-content .filters .filter{padding:15px 40px}.site-content .portfolio{--column-count: var(--portfolio-column-count-medium)}}@media(min-width: 1280px){.site-content .portfolio{--column-count: var(--portfolio-column-count)}}