/* Portfolio layout and monitor frames matched to the original portfolio page. */
.portfolio-intro{padding:44px 20px 40px;background:#fff}
.portfolio-intro-inner{max-width:1320px;margin:auto;display:grid;grid-template-columns:55.263fr 44.562fr;align-items:center}
.portfolio-intro-copy{padding-right:30px}
.portfolio-intro-copy h1{margin:0 0 20px;color:var(--blue);font:700 36px/1.1 neuzeit-grotesk,sans-serif}
.portfolio-intro-copy p{margin:0;color:var(--cyan);font:700 22px/1.1 neuzeit-grotesk,sans-serif}
.portfolio-contact{padding:30px;border-radius:30px;background:var(--blue);color:#fff;text-align:center}
.portfolio-contact h2{margin:0 0 20px;font:700 30px/1.1 neuzeit-grotesk,sans-serif}
.portfolio-contact p{margin:0 0 20px;font:300 22px/1.1 neuzeit-grotesk,sans-serif}
.portfolio-contact .pill-button{min-height:42px;padding:10px 25px;gap:6px;font:600 18px/22px Lexend,sans-serif}
.portfolio-contact .pill-button:hover{background:#fff;color:var(--blue)}
.contact-arrow{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:#fff;color:var(--cyan);font:700 16px/1 sans-serif}
.portfolio-gallery{padding:40px 20px;background:#f6f6f6}
.portfolio-gallery .portfolio-grid{max-width:1580px;margin:auto;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:26px;row-gap:0}
.portfolio-gallery .portfolio-card{padding:10px;border:0;background:transparent;overflow:visible}
.portfolio-gallery .portfolio-card a{display:block}
.portfolio-gallery .portfolio-card .portfolio-monitor{position:relative;width:100%;aspect-ratio:936/760;padding:0;background:url('/assets/interior/macbook-bg.png') center/contain no-repeat}
.portfolio-gallery .portfolio-card img{position:absolute;top:7.1%;left:4.15%;width:91.7%;height:67.3%;aspect-ratio:auto;object-fit:cover;object-position:top;transition:none}
.portfolio-gallery .portfolio-card a:hover img{transform:none}
.portfolio-gallery .portfolio-card h2{padding:4px 0 0;margin:0 0 20px;text-align:center;color:var(--blue);font:700 22px/1.1 neuzeit-grotesk,sans-serif}
.portfolio-gallery .portfolio-card a:hover h2{text-decoration:underline;text-underline-offset:4px}
@media(max-width:1466px){.portfolio-intro{padding:20px 30px}.portfolio-gallery .portfolio-grid{column-gap:22px}}
@media(max-width:1024px){.portfolio-gallery .portfolio-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:38px}}
@media(max-width:767px){.portfolio-intro{padding:34px 20px}.portfolio-intro-inner{grid-template-columns:1fr}.portfolio-intro-copy{padding:0 0 25px}.portfolio-intro-copy h1{font-size:32px}.portfolio-contact{padding:30px 24px}.portfolio-gallery .portfolio-grid{column-gap:20px}.portfolio-gallery{padding:30px 10px}.portfolio-gallery .portfolio-card{padding:5px}.portfolio-gallery .portfolio-card h2{font-size:20px}}
@media(max-width:540px){.portfolio-gallery .portfolio-grid{grid-template-columns:1fr;max-width:400px}.portfolio-intro-copy h1{font-size:30px}.portfolio-intro-copy p{font-size:21px}.portfolio-contact h2{font-size:28px}.portfolio-contact p{font-size:21px}}