/*
THIS CODE AND INFORMATION IS PROVIDED "AS IS" WITHOUT WARRANTY OF
ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING BUT NOT LIMITED TO
THE IMPLIED WARRANTIES OF MERCHANTABILITY AND/OR FITNESS FOR A
PARTICULAR PURPOSE.

Copyright (c) Microsoft Corporation. All rights reserved
*/

/* General styles */
#scenario3 {
    display: flex;
    flex-direction: column;
    height: 100%;
}

    #scenario3 .grid {
        display: -ms-grid;
        height: 100%;
        white-space: normal;
    }

    #scenario3 .mainGrid {
        background-color: lightgrey;
        color: black;
    }

    #scenario3 .secondaryGrid {
        background-color: darkgrey;
    }

    #scenario3 .mainGrid, 
    #scenario3 .secondaryGrid {
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }

    #scenario3 .mainGridContents, 
    #scenario3 .secondaryGridContents {
        max-width: 100%;
        max-height: 100%;
    }

    /* Landscape layout is defined here */
    #scenario3 .grid {
        -ms-grid-rows: 1fr;
        -ms-grid-columns: 2fr 1fr;
    }

    #scenario3 .mainGrid {
        -ms-grid-row: 1;
        -ms-grid-column: 1;
    }

    #scenario3 .secondaryGrid {
        -ms-grid-row: 1;
        -ms-grid-column: 2;
    }

/* Portrait layout is defined here */
@media (orientation: portrait) {
    #scenario3 .grid {
        -ms-grid-rows: 2fr 1fr;
        -ms-grid-columns: 1fr;
    }

    #scenario3 .mainGrid {
        -ms-grid-row: 1;
        -ms-grid-column: 1;
    }

    #scenario3 .secondaryGrid {
        -ms-grid-row: 2;
        -ms-grid-column: 1;
    }
}
