.portfolio-mockup-section{--portfolio-frame:8px;--portfolio-radius:28px;--portfolio-offset:64px;padding-bottom:4rem}.portfolio-mockup-board{width:100%}.portfolio-mockup-sheets{display:grid;grid-template-columns:minmax(0,1fr);gap:48px}.portfolio-mockup-main{width:92%;margin-inline:auto}.portfolio-mockup-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;align-items:start}.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;width:80%;justify-self:center}.portfolio-mockup-sheet{display:block;min-width:0;overflow:hidden;border:var(--portfolio-frame) solid var(--barit-black);border-radius:var(--portfolio-radius);background:var(--barit-black)}.portfolio-mockup-sheet img{display:block;width:100%;height:auto;border-radius:calc(var(--portfolio-radius) - var(--portfolio-frame))}.portfolio-mockup-sheet:focus-visible{outline:3px solid var(--barit-red);outline-offset:4px}.portfolio-mockup-caption{margin:1rem auto 0;color:var(--barit-gray-700);font-size:.875rem;line-height:1.6;text-align:right;word-break:keep-all}@media (max-width:991px){.portfolio-mockup-section{--portfolio-offset:32px}}@media (max-width:767px){.portfolio-mockup-section{--portfolio-frame:6px;--portfolio-radius:20px;--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}}