#weatherPage {
  width: 100%;
  overflow: hidden;
}

#container.detail #weatherPage > #day,
#container.detail #weatherPage > #hour,

#container.daily #weatherPage > #detail,
#container.daily #weatherPage > #hour,

#container.hourly #weatherPage > #detail,
#container.hourly #weatherPage > #day { display: none; }

#container #weatherPage > #detail,
#container #weatherPage > #day,
#container #weatherPage > #hour {
    display: inline-block;
    width: 100%;
}

#container #weatherPage > #detail,
#container #weatherPage > #day,
#container #weatherPage > #hour {
        height: 100%;
        border-right: none;
}

@media screen and ( orientation: landscape ) and ( min-width: 992px ) {
    #weatherPage {
        height: 100%;
        overflow: hidden;
    }

    #container.detail #weatherPage > #day,
    #container.detail #weatherPage > #hour,

    #container.daily #weatherPage > #detail,
    #container.daily #weatherPage > #hour,

    #container.hourly #weatherPage > #detail,
    #container.hourly #weatherPage > #day { display: inline-block; }
    
    #container #weatherPage > #detail,
    #container #weatherPage > #day {
        display: inline-block;
        width: calc( 33% + calc( .1 * var( --cubit ) ) );
        height: 100%;
    }
    
    #container #weatherPage > #hour {
        display: inline-block;
        width: calc( 33% - calc( .7 * var( --cubit ) ) );
        height: 100%;
    }
    
    #container #weatherPage > #detail,
    #container #weatherPage > #day {
        border-right: calc( .2 * var( --cubit ) ) solid var( --cg6 );
    }
}