.portfolio-viewer {
    background: transparent;
    border: 0;
    color: #333436;
    height: 100%;
    height: 100dvh;
    margin: 0;
    max-height: none;
    max-width: none;
    padding: 24px;
    width: 100%;
}

.portfolio-viewer[open] {
    display: grid;
    place-items: center;
}

.portfolio-viewer::backdrop {
    background: rgba(23, 26, 30, .84);
}

.portfolio-viewer__panel {
    background: #fffaf4;
    border-radius: 24px;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    height: min(900px, 100%);
    max-width: 1120px;
    min-height: 0;
    overflow: hidden;
    width: 100%;
}

.portfolio-viewer__top,
.portfolio-viewer__bottom {
    align-items: center;
    display: flex;
    gap: 16px;
    padding: 12px 20px;
}

.portfolio-viewer__top { justify-content: space-between; }
.portfolio-viewer__count { color: #646568; font-size: 15px; font-variant-numeric: tabular-nums; }
.portfolio-viewer__stage { display: grid; min-height: 0; padding: 0 20px; place-items: center; }
.portfolio-viewer__image { height: 100%; min-height: 0; object-fit: contain; width: 100%; }
.portfolio-viewer__image[hidden] { display: none; }
.portfolio-viewer__status { color: #646568; margin: 0; text-align: center; }
.portfolio-viewer__status:empty { display: none; }
.portfolio-viewer__bottom { min-height: 80px; }
.portfolio-viewer__caption { flex: 1; font-size: 18px; line-height: 1.35; margin: 0; text-align: center; }

.portfolio-viewer__button {
    align-items: center;
    background: #fff;
    border: 1px solid #ded7ce;
    border-radius: 50%;
    color: #333436;
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 48px;
    font: inherit;
    font-size: 26px;
    height: 48px;
    justify-content: center;
    line-height: 1;
    padding: 0;
    width: 48px;
}
.portfolio-viewer__button[hidden] { display: none; }
.portfolio-viewer__button:active { transform: scale(.97); }
.portfolio-viewer__button:focus-visible { outline: 3px solid #ff7568; outline-offset: 3px; }
.portfolio-page a[data-portfolio-photo] { cursor: zoom-in; }

@media (hover: hover) and (pointer: fine) {
    .portfolio-viewer__button:hover { background: #fff0e8; border-color: #ff7568; }
}
@media (max-width: 767.98px) {
    .portfolio-viewer { padding: 8px; }
    .portfolio-viewer__panel { border-radius: 16px; }
    .portfolio-viewer__top, .portfolio-viewer__bottom { gap: 10px; padding: 12px; }
    .portfolio-viewer__stage { padding: 0 8px; }
    .portfolio-viewer__caption { font-size: 16px; }
}
@media (max-height: 450px) {
    .portfolio-viewer { padding: 6px; }
    .portfolio-viewer__top, .portfolio-viewer__bottom { padding: 4px 12px; }
    .portfolio-viewer__bottom { min-height: 56px; }
}