.portfolio-detail {
    --detail-max: 1600px;
    width: min(100%, calc(var(--detail-max) + (2 * var(--page-padding))));
}
.portfolio-detail__back {
    display: inline-block;
    margin-bottom: clamp(24px, 4vw, 56px);
    color: inherit;
    font-size: 11px;
    letter-spacing: .06em;
    text-decoration: none;
    opacity: .52;
    transition: opacity var(--motion-fast) ease;
}
.portfolio-detail__back:hover,
.portfolio-detail__back:focus-visible { opacity: 1; }
.portfolio-detail__article,
.portfolio-detail__figure { margin: 0; }
.portfolio-detail__image {
    display: block;
    width: 100%;
    max-height: calc(100vh - 120px);
    max-height: calc(100dvh - 120px);
    object-fit: contain;
    object-position: center;
}
.portfolio-detail__meta {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    padding: 14px 0 0;
    font-size: 10px;
    letter-spacing: .07em;
    opacity: .48;
}
.portfolio-detail__navigation {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: clamp(28px, 4vw, 54px) 0 0;
    font-size: 22px;
}
.portfolio-detail__navigation div:last-child { text-align: right; }
.portfolio-detail__navigation a {
    color: inherit;
    text-decoration: none;
    opacity: .48;
    transition: opacity var(--motion-fast) ease;
}
.portfolio-detail__navigation a:hover,
.portfolio-detail__navigation a:focus-visible { opacity: 1; }
@media (max-width: 820px) {
    .portfolio-detail__image { max-height: calc(100dvh - 90px); }
}