.portfolio-page{background-color:var(--bg-cream);min-height:100vh}.category-tabs{margin-bottom:3rem}.category-tabs button{letter-spacing:.1em;font-size:1rem;transition:all .3s;position:relative}.category-tabs button:after{content:"";background-color:var(--text-primary);width:0;height:1px;transition:all .3s;position:absolute;bottom:-1px;left:50%;transform:translate(-50%)}.category-tabs button:hover:after{width:70%}.category-tabs button.active{font-weight:500}.category-tabs button.active:after{width:100%;height:2px}.gallery-grid{grid-gap:1.5rem;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));display:grid}.gallery-grid>div{background-color:#fff;border-radius:2px;height:100%;transition:transform .3s,box-shadow .3s;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.05)}.gallery-grid .aspect-\[3\/4\]{width:100%;height:0;padding-bottom:133.33%;position:relative;overflow:hidden}.gallery-grid .aspect-\[3\/4\]>div{width:100%;height:100%;position:absolute;top:0;left:0}.gallery-grid img{-o-object-fit:cover;object-fit:cover;width:100%;height:100%;transition:transform .5s}.gallery-grid>div:hover{transform:translateY(-5px);box-shadow:0 5px 15px rgba(0,0,0,.1)}.gallery-grid>div:hover img{transform:scale(1.05)}.portfolio-page .guide-section,.portfolio-page .mt-16{background-color:var(--bg-cream-darker,#f2f0ed);border-radius:.5rem;margin-top:4rem;padding:2rem}.guide-section h2,.mt-16 h2{margin-bottom:1rem;font-weight:300}.guide-section code,.mt-16 code{background-color:rgba(0,0,0,.05);border-radius:.25rem;padding:.2rem .4rem;font-size:.9rem}.gallery-grid img{opacity:0;animation:.5s forwards fadeIn}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.gallery-grid>div:first-child img{animation-delay:.1s}.gallery-grid>div:nth-child(2) img{animation-delay:.2s}.gallery-grid>div:nth-child(3) img{animation-delay:.3s}.gallery-grid>div:nth-child(4) img{animation-delay:.4s}.gallery-grid>div:nth-child(5) img{animation-delay:.5s}.gallery-grid>div:nth-child(6) img{animation-delay:.6s}.gallery-grid>div:nth-child(7) img{animation-delay:.7s}.gallery-grid>div:nth-child(8) img{animation-delay:.8s}.gallery-grid>div:nth-child(9) img{animation-delay:.9s}@media (max-width:1200px){.gallery-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}}@media (max-width:768px){.category-tabs button{padding-left:1rem;padding-right:1rem;font-size:.9rem}.gallery-grid{grid-gap:1rem;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}}@media (max-width:480px){.category-tabs button{padding-left:.75rem;padding-right:.75rem;font-size:.8rem}.gallery-grid{grid-gap:.75rem;grid-template-columns:repeat(2,1fr)}}