:root{--header-height:70px;--floating-header-height:60px}.page-project .image-section-wrapper{background-color:#f4f4f4}.page-project .image-section{display:grid;gap:0 3rem;grid-template-columns:3fr 2fr;min-height:100px}.page-project .project-did{font-size:.875rem;font-weight:300;padding-block:1rem}.page-project .project-did h4{margin:0}.page-project .project-image{align-self:center;display:flex;justify-content:center;max-height:300px;overflow:hidden}.page-project .project-image img{height:100%;object-fit:cover;object-position:center;width:100%}.page-project .project-title-wrapper{align-items:center;color:#ffa84b;display:flex;gap:1rem;justify-content:center;justify-self:center;margin:1rem 0;width:fit-content}.page-project .project-title-wrapper h3{margin:0}.page-project .project-title-wrapper svg{height:42px;width:42px}.page-project .project-title-wrapper svg path{fill:#ffa84b}.page-project .breadcrumbs{justify-self:center;text-align:center}.page-project .content-section{display:flex;gap:0 3rem}.page-project .project-gallery{flex-shrink:0;width:calc(560px + 1rem)}.page-project .project-gallery .images{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;justify-items:center}.page-project .project-gallery .image{aspect-ratio:1/1;background-color:#f4f4f4;display:flex;justify-content:center;max-width:280px;padding:.25rem;transition:background-color .3s ease;width:100%}.page-project .project-gallery .image:hover{background-color:#ffa84b}.page-project .project-gallery .image:hover img{transform:scale(1.1)}.page-project .project-gallery .image img{height:100%;object-fit:contain;transition:transform .3s ease;width:100%}.page-project .project-links{display:flex;flex-wrap:wrap;gap:.5rem 1rem;justify-content:center;margin-top:3rem}@media (max-width:64rem){.page-project .content-section{flex-direction:column}.page-project .project-gallery{width:100%}.page-project .project-gallery .image{max-width:calc(33% - 1rem)}}@media (max-width:48rem){.page-project .image-section{grid-template-columns:1fr}.page-project .project-title-wrapper{gap:.5rem}.page-project .project-title-wrapper svg{height:28px;width:28px}.page-project .project-gallery .image{max-width:calc(50% - 1rem)}}@media (max-width:40rem){.page-project .project-gallery .image{max-width:100%}}