.portfolio-page .container{padding-bottom:20em}.portfolio-header{width:50%;margin:2em auto 4em;text-align:center;-webkit-clip-path:polygon(0 0,100% 0,100% 100%,0 100%);clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}.portfolio-header h1{position:relative;transform:translateY(64px);will-change:transform}.portfolio-row{width:100%;display:flex;gap:2em}.portfolio-row .col{position:relative;width:100%;height:380px;margin-bottom:2em;overflow:hidden;-webkit-clip-path:polygon(0 100%,100% 100%,100% 100%,0 100%);clip-path:polygon(0 100%,100% 100%,100% 100%,0 100%);cursor:pointer;transition:all .4s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 8px rgba(0,0,0,.1)}.portfolio-row .col:hover{box-shadow:0 8px 16px rgba(0,0,0,.15);transform:translateY(-2px)}.portfolio-row .col img{will-change:transform;transition:transform .6s cubic-bezier(.4,0,.2,1)}.portfolio-row .col:hover img{transform:scale(1.05)}.portfolio-row .col.lg{flex:2 1}.portfolio-row .col.sm{flex:1.25 1}.portfolio-row .col .project-title{position:absolute;left:1em;bottom:1em;-webkit-clip-path:polygon(0 0,100% 0,100% 100%,0 100%);clip-path:polygon(0 0,100% 0,100% 100%,0 100%);z-index:10;transition:transform .4s cubic-bezier(.4,0,.2,1)}.portfolio-row .col:hover .project-title{transform:translateY(-2px)}.portfolio-row .col .project-title h3{position:relative;transform:translateY(24px);font-size:20px;will-change:transform;transition:color .3s cubic-bezier(.4,0,.2,1);text-shadow:0 1px 2px rgba(0,0,0,.3);color:#fff}.portfolio-row .col:hover .project-title h3{color:var(--text)}@media (max-width:900px){.portfolio-row{flex-direction:column}}