.portfolioProjects{background:var(--background);padding:80px 0}.portfolioProjects-container{width:min(92%,1320px);margin:auto}.portfolioProjects-header{justify-content:space-between;align-items:flex-end;gap:80px;margin-bottom:70px;display:flex}.portfolioProjects-header>div:first-child{flex:1}.portfolio-header-right{width:32rem}.portfolio-title{white-space:normal;margin-bottom:0}.portfolio-title span{color:var(--secondary-dark)}.portfolio-topbar{justify-content:space-between;align-items:center;gap:40px;margin-bottom:2.2rem;display:flex}.portfolio-count{white-space:nowrap;align-items:center;gap:18px;display:flex}.portfolio-count span{color:var(--black-text);letter-spacing:2px;font-size:12px;font-weight:600;font-family:var(--font-hanken-grotesk)}.portfolio-line{background:var(--black-text);width:65px;height:1px}.portfolio-filters{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:.2rem;display:flex}.portfolio-filters button{cursor:pointer;color:var(--grey-text);letter-spacing:1px;font-size:12px;font-weight:600;font-family:var(--font-montserrat);background:0 0;border:none;border-radius:999px;outline:none;padding:13px 18px;transition:all .35s}.portfolio-filters button:hover{border-color:var(--btn-background);color:var(--btn-background)}.portfolio-filters button.active{background:var(--btn-background);color:var(--white-text);border-color:var(--btn-background)}.portfolio-list{flex-direction:column;gap:90px;display:flex}.portfolio-card{grid-template-columns:1fr 1.2fr;align-items:stretch;gap:2rem;display:grid}.portfolio-card.reverse{grid-template-columns:1.2fr 1fr}.portfolio-card.reverse .portfolio-main-image{order:1}.portfolio-card.reverse .portfolio-content-wrapper{order:0}.portfolio-content{flex-direction:row;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:24px;display:flex}.portfolio-content:last-child{margin-bottom:0}.portfolio-content-inner{flex-direction:column;gap:.5rem;display:flex}.portfolio-card.reverse .portfolio-content:first-child,.portfolio-card.reverse .portfolio-content:last-child{flex-direction:row-reverse}.portfolio-main-image{border-radius:34px;flex-shrink:0;height:26rem;margin-top:auto;overflow:hidden}.portfolio-main-image img{object-fit:cover;width:100%;height:100%;transition:all .45s;display:block}.portfolio-main-image:hover img{transform:scale(1.06)}.portfolio-content-wrapper{flex-direction:column;justify-content:space-between;gap:24px;display:flex}.portfolio-content-top{flex-direction:row;align-items:flex-start;gap:24px;display:flex}.portfolio-content-text{flex:1}.portfolio-project-title{white-space:normal;margin:0;font-size:38px;font-weight:700;line-height:1.08}.portfolio-project-desc{color:var(--secondary-brown);margin:0;font-size:20px;line-height:1.3}.portfolio-side-image{border-radius:34px;flex-shrink:0;width:18rem;height:12rem;overflow:hidden}.portfolio-side-image img{object-fit:cover;width:100%;height:100%;transition:all .45s;display:block}.portfolio-side-image:hover img{transform:scale(1.06)}.portfolio-content-bottom{flex-direction:row;align-items:stretch;gap:24px;display:flex}.portfolio-small-image{border-radius:34px;flex-shrink:0;width:18rem;height:12rem;overflow:hidden}.portfolio-small-image img{object-fit:cover;width:100%;height:100%;transition:all .45s;display:block}.portfolio-small-image:hover img{transform:scale(1.06)}.portfolio-meta{flex-direction:column;flex-shrink:0;justify-content:center;gap:20px;width:18rem;padding:10px 0;display:flex}.portfolio-meta-item{text-align:end}.portfolio-meta-item h5{color:var(--black-text);letter-spacing:2px;font-size:16px;font-weight:600;font-family:var(--font-montserrat);margin:0}.portfolio-meta-item span{color:var(--black-text);font-size:16px;line-height:1.6;font-family:var(--font-montserrat)}.portfolio-load-btn{justify-content:center;align-items:center;margin:2.5rem auto 0;display:flex}.portfolio-card.reverse .portfolio-meta-item{text-align:start}.portfolio-card{transition:all .35s}.portfolio-main-image,.portfolio-side-image,.portfolio-small-image{cursor:pointer}.portfolio-main-image img,.portfolio-side-image img,.portfolio-small-image img{transition:transform .45s}.portfolio-main-image:hover img,.portfolio-side-image:hover img,.portfolio-small-image:hover img{transform:scale(1.08)}@media (max-width:1200px){.portfolioProjects-header{gap:50px}.portfolio-title{font-size:52px}.portfolio-card,.portfolio-card.reverse{grid-template-columns:1fr;gap:30px}.portfolio-card.reverse .portfolio-main-image,.portfolio-card.reverse .portfolio-content-wrapper{order:unset}.portfolio-card.reverse .portfolio-content:first-child,.portfolio-card.reverse .portfolio-content:last-child{flex-direction:row}.portfolio-card.reverse .portfolio-meta-item{text-align:end}.portfolio-main-image{height:30rem}.portfolio-side-image{width:18rem;height:10rem}.portfolio-small-image{height:10rem}.portfolio-meta{width:16rem}}@media (max-width:992px){.portfolioProjects-header{flex-direction:column;gap:35px}.portfolio-header-right{width:100%}.portfolio-topbar{flex-direction:column;align-items:flex-start;gap:25px}.portfolio-filters{justify-content:flex-start}.portfolio-content,.portfolio-card.reverse .portfolio-content:first-child,.portfolio-card.reverse .portfolio-content:last-child{flex-direction:column!important}.portfolio-side-image,.portfolio-small-image{width:100%;height:12rem}.portfolio-meta{flex-flow:wrap;justify-content:flex-start;gap:30px;width:100%;padding:10px 0}.portfolio-meta-item{flex:1;min-width:150px;text-align:start!important}.portfolio-card.reverse .portfolio-meta-item{text-align:start!important}}@media (max-width:768px){.portfolioProjects{padding:70px 0}.portfolio-title{font-size:40px}.portfolio-project-title{font-size:34px}.portfolio-project-desc{font-size:16px}.portfolio-main-image{height:25rem}.portfolio-side-image,.portfolio-small-image{height:10rem}.portfolio-filters{gap:10px}.portfolio-filters button{padding:11px 18px;font-size:11px}.portfolio-meta{gap:20px}.portfolio-meta-item{min-width:120px}}@media (max-width:480px){.portfolio-title{font-size:32px}.portfolio-project-title{font-size:28px}.portfolio-main-image{height:20rem}.portfolio-side-image,.portfolio-small-image{height:8rem}.portfolio-meta-item span{font-size:15px}.portfolio-meta{gap:15px}.portfolio-meta-item{min-width:100%}}
