body {
    font-family: monospace;
    margin: 0;
    padding: 0;
}

.wrapper {
    display: flex;
    margin: 0;
    flex-direction: column;
}

.main {
    background-color: pink;
    height: 100vh;
    padding: 1rem;
}

.hinge {
    background-color: lightgray;
    height: 0px;
    width: 0px;
}

.hinge>p {
    text-orientation: mixed;
    writing-mode: vertical-rl;
    margin-top: 1rem;
}

.detail {
    background-color: lightblue;
    height: 100vh;
    padding: 1rem;
}

@media (horizontal-viewport-segments: 2) {
    .wrapper {
        display: grid;
        grid-template-areas: "left hinge right";
        grid-template-columns: env(viewport-segment-width 0 0) calc(env(viewport-segment-left 1 0) - env(viewport-segment-width 0 0)) env(viewport-segment-width 1 0);
    }

    .main {
        grid-area: left;
    }

    .hinge {
        grid-area: hinge;
    }

    .detail {
        grid-area: right;
    }
}

@media (vertical-viewport-segments: 2) {
    .wrapper {
        display: grid;
        grid-template-areas: 
            "top"
            "hinge"
            "bottom";
        grid-template-rows: env(viewport-segment-height 0 0) calc(env(viewport-segment-top 0 1) - env(viewport-segment-height 0 0)) env(viewport-segment-height 0 1);
    }

    .main {
        grid-area: top;
        height: unset;
    }

    .hinge {
        grid-area: hinge;
        height: unset;
    }

    .hinge>p {
        text-orientation: upright;
        writing-mode: unset;
    }

    .detail {
        grid-area: bottom;
        height: unset;
    }
}