:root,
html,
body {
    width: 100%;
    height: 100%;
    min-width: 1237px;
    min-height: 720px;
}

html {
    background-image: url(../images/background.jpg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
}

.grid-layout {
    display: grid;
    grid-template-columns: 1fr 2fr
}

@media only screen and (max-width: 1237px) {
    .grid-layout {
        grid-template-columns: 437px auto;
    }
}

.left-root {
    display: grid;
    grid-template-rows: 1fr 3fr
}

.banner-root {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

.banner-logo {
    margin: auto 0px;
    width: 437px;
    height: 127px;
}

.content-root {
    grid-column-start: 2;
    margin: auto;
}

.lunch-tray {
    background-image: url(../images/kiosk-lunch-tray.png);
    grid-row-start: 2;
    background-size: cover;
    background-position: top right;
    background-repeat: no-repeat;
}