:root {
    --ph-frame-wide: 1360px;
    --ph-frame-standard: 1280px;
    --ph-frame-narrow: 1024px;
    --ph-frame-reading: 768px;
    --ph-frame-gutter: clamp(1rem, 2vw, 1.5rem);
}

.ph-band {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
}

.ph-frame {
    --ph-frame-max: var(--ph-frame-standard);
    box-sizing: border-box;
    width: min(calc(100% - (var(--ph-frame-gutter) * 2)), var(--ph-frame-max));
    max-width: var(--ph-frame-max);
    min-width: 0;
    margin-inline: auto;
}

.ph-frame--wide {
    --ph-frame-max: var(--ph-frame-wide);
}

.ph-frame--narrow {
    --ph-frame-max: var(--ph-frame-narrow);
}

.ph-frame--reading {
    --ph-frame-max: var(--ph-frame-reading);
}

.ph-frame :is(.container, .grid, .flex, img, svg, video) {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
}