/* Additional real projects reuse the established native screenshot viewer. */
.portfolio-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:54px;margin-bottom:64px;padding-bottom:0;border-bottom:0}
.portfolio-grid .case-study{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto 1fr;row-gap:26px;margin:0;padding:0;border:0}
.portfolio-grid .case-intro{grid-column:1;grid-row:1}
.portfolio-grid .case-visual{grid-column:1;grid-row:2;width:100%;margin:0;padding:0;align-self:start}
.portfolio-grid .case-details{grid-column:1;grid-row:3;display:flex;flex-direction:column}
.portfolio-grid .case-study h3{font-size:46px;max-width:none;margin-bottom:20px}
.portfolio-grid .case-title{font-size:25px;line-height:1.25;min-height:3.75em;max-width:21em}
.portfolio-grid .case-label{margin-bottom:24px}
.portfolio-grid .case-screens{height:380px}
.portfolio-grid .case-description{font-size:14px;max-width:none}
.portfolio-grid .case-action{margin-top:auto}
.portfolio-grid .case-switch{margin-bottom:10px}
.portfolio-project .case-stage{padding:20px 8px}
.portfolio-project .case-stage::before{inset:4px 0;background:#d3ece8;transform:rotate(2deg);border-radius:60px 16px 16px 16px}
.portfolio-project .case-stage::after{display:none}
.portfolio-getflivo .case-stage::before{background:#e4d6cf;transform:rotate(-2deg);border-radius:16px 60px 16px 16px}
.portfolio-project .case-browser{border-color:#bdcccc}
.portfolio-project .case-switch button{min-height:44px;padding-inline:17px}
.portfolio-project .case-screens{background:#f7f8fa}
.portfolio-project .case-scroll{scrollbar-color:#688b88 #e4eeec}
.portfolio-project .case-scroll::-webkit-scrollbar-track{background:#e4eeec}
.portfolio-project .case-scroll::-webkit-scrollbar-thumb{background:#688b88;border-color:#e4eeec}
.portfolio-preview-label{font-size:9px;color:#536572}
.portfolio-section{background:#f1efea;border-top:1px solid var(--line)}
.portfolio-section .case-study{padding-block:0;margin:0}
.portfolio-section .case-screens{height:400px}
.portfolio-section .portfolio-project .case-stage::before{background:#d3ece8}
.portfolio-noscript{font-size:12px;line-height:1.7}
.portfolio-noscript a{color:inherit;text-decoration:underline}
@media(max-width:1100px){.portfolio-grid{gap:32px}.portfolio-grid .case-study h3{font-size:42px}.portfolio-grid .case-title{font-size:23px}.portfolio-grid .case-screens{height:330px}}
@media(max-width:950px){.portfolio-grid{grid-template-columns:minmax(0,1fr);gap:64px}.portfolio-grid .case-title{min-height:0;max-width:26em}.portfolio-grid .case-screens{height:440px}.portfolio-grid .case-visual{max-width:760px;justify-self:center}.portfolio-grid .case-study{row-gap:22px}.portfolio-grid .case-description{max-width:46em}.portfolio-grid .case-study+.case-study{border-top:1px solid #bfccd233;padding-top:54px}}
@media(max-width:700px){.portfolio-grid{margin-bottom:40px;padding-bottom:40px;gap:42px}.portfolio-grid .case-study h3{font-size:44px}.portfolio-grid .case-title{font-size:25px;line-height:1.2}.portfolio-grid .case-screens,.portfolio-section .case-screens{height:min(480px,67svh)}.portfolio-project .case-stage{padding:15px 0}.portfolio-project .case-switch button{font-size:11px;padding-inline:14px}.portfolio-preview-label{font-size:8px}.portfolio-grid .case-visual{width:100%}.portfolio-grid .case-study+.case-study{padding-top:42px}.portfolio-grid .case-action{gap:12px}.portfolio-project .case-preview-note{margin-top:0}}

.portfolio-scroll-hint{font:inherit;color:inherit}

.portfolio-localwebp .case-screens:has([data-case-panel="plugin"]:not([hidden])){height:auto}
.portfolio-localwebp .case-screens:has([data-case-panel="plugin"]:not([hidden])) .case-scroll{height:auto}
.portfolio-enlarge{display:none;align-items:center;justify-content:center;gap:12px;min-height:44px;font-size:12px;color:inherit;text-underline-offset:4px;margin-top:6px}
.portfolio-localwebp:has([data-case-panel="plugin"]:not([hidden])) .portfolio-enlarge{display:flex}

.portfolio-project .case-switch button{flex:1 1 auto;min-width:0}
.portfolio-project [data-portfolio-note]{display:none}
.portfolio-project:has([data-case-panel="website"]:not([hidden])) [data-portfolio-note="website"],
.portfolio-project:has([data-case-panel="converter"]:not([hidden])) [data-portfolio-note="converter"],
.portfolio-project:has([data-case-panel="plugin"]:not([hidden])) [data-portfolio-note="plugin"]{display:inline}