[data-page-type=master-detail] {

    &[data-mode=desktop][data-is-open] {
        grid-template-columns: auto auto auto 1fr;
        transition: none;
        & [data-base-page][data-element=detail] {
            grid-column: 4;
            grid-row: 1 / span 3;
            transition: none;
        }
    }

    & > *[data-element=close] {
        grid-row: 1;
        grid-column: 4;
        color: red;
        margin-top: 5px;
        padding: 5px;
        justify-self: end;
        font-size: 1.5em;
        z-index: 2;
    }

    & > [data-page-element=content] {
        display: grid;
        & > * {
            grid-row: 1;
            grid-column: 1;
            align-self: stretch;
            justify-self: stretch;
        }
        & > *[data-element=detail] {
            display: none;
        }
        &[data-mode=desktop] {
            display: grid;
            grid-template-rows: auto 1fr;
            overflow: hidden;
            & > *{
                grid-row: 1 / span 2;
                grid-column: 1;
                overflow: auto;
            }
            & > *[data-element=close] {
                grid-row: 1;
                grid-column: 3;
                color: red;
                margin-top: 0.35em;
                padding: 5px;
                align-self: center;
                justify-self: center;
                font-size: 1.5em;
                z-index: 2;
            }
            & > [data-element=detail] {
                grid-row: 1 / span 2;
                grid-column: 2 / span 2;
                align-self: stretch;
                justify-self: stretch;
                transform: none;
                transition: none;
                display: grid;
                position: relative;
                margin: 5px;
                border-radius: 9px;
                box-shadow: rgb(50 50 105 / 7%) 0px 2px 5px 0px, rgb(0 0 0 / 3%) 0px 1px 1px 0px;
                border: solid 1px rgb(217 217 217);
                padding: 0;
                & > [data-page-element=header] {
                    grid-column: 1 / span 3;
                }
                & > [data-page-element=footer] {
                    grid-column: 1 / span 3;
                }
                & > [data-page-element=content] {
                    grid-column: 1 / span 3;
                }
            }
        }
    }
}