.portfolio-mockup-section{--portfolio-stage:#f0efeb;--portfolio-frame:8px;--portfolio-radius:28px;--portfolio-offset:64px;--portfolio-stage-padding:48px;padding-bottom:4rem}.portfolio-mockup-board{width:100%}.portfolio-mockup-sheets{padding:var(--portfolio-stage-padding);background:var(--portfolio-stage);grid-template-columns:minmax(0,1fr);gap:48px;display:grid}.portfolio-mockup-main{width:92%;margin-inline:auto}.portfolio-mockup-pair{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:32px;display:grid}.portfolio-mockup-pair[data-layout="1"]{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}.portfolio-mockup-pair[data-layout="2"]{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}.portfolio-mockup-pair[data-layout="1"]>:last-child:not(:only-child),.portfolio-mockup-pair[data-layout="2"]>:first-child:not(:only-child){margin-top:var(--portfolio-offset)}.portfolio-mockup-pair>:only-child{grid-column:1/-1;justify-self:center;width:80%}.portfolio-mockup-sheet{border:var(--portfolio-frame) solid var(--barit-black);border-radius:var(--portfolio-radius);background:var(--barit-black);min-width:0;display:block}.portfolio-mockup-sheet img{border-radius:calc(var(--portfolio-radius) - var(--portfolio-frame));width:100%;height:auto;display:block}.portfolio-mockup-sheet:focus-visible{outline:3px solid var(--barit-red);outline-offset:4px}.portfolio-mockup-caption{color:var(--barit-gray-700);text-align:right;word-break:keep-all;margin:1rem auto 0;font-size:.875rem;line-height:1.6}@media (max-width:991px){.portfolio-mockup-section{--portfolio-stage-padding:24px;--portfolio-offset:32px}}@media (max-width:767px){.portfolio-mockup-section{--portfolio-frame:6px;--portfolio-radius:20px;--portfolio-stage-padding:16px;--portfolio-offset:0px}.portfolio-mockup-sheets{gap:32px}.portfolio-mockup-main{width:100%}.portfolio-mockup-pair[data-layout]{grid-template-columns:minmax(0,1fr)}.portfolio-mockup-pair>:only-child{width:100%}}@media (max-width:575px){.portfolio-mockup-section{padding-bottom:3rem}.portfolio-mockup-caption{text-align:left}}