body { display: grid; grid-template-columns: 23% auto; grid-template-rows: 47% auto 47px; grid-template-areas: "side-bar main-upper" "side-bar main-lower" "side-bar footer"; } /* Overall Grid */ side-bar, main-upper, main-lower, footer { border: 0px solid red; } /* Secondary Grid */ .upper-nav, .upper-content { border: 0px solid blue; } /* ----------------------------------------------- */ side-bar { grid-area: side-bar; text-align: center; background: url('../images/RVME Zig-Zag BG - black.png') center; } main-upper { grid-area: main-upper; background: url('../images/stock_1 (blue vignette).png') center; background-size: cover; display: grid; grid-template-rows: 47px auto; grid-template-areas: "upper-nav" "upper-content"; border: 0px solid blue; } main-lower { grid-area: main-lower; padding: 15px; display: grid; grid-template-columns: auto 366px; grid-template-areas: "lefty" "righty"; } .upper-content { grid-area: "upper-content"; display: flex; text-align: center; justify-content: center; align-items: center; height: 100%; font-family: 'Playfair Display', serif; color: #FFFFFF; font-weight: lighter; /* 100 - 900 */ font-size: 3em; letter-spacing: 1px; } .lefty { grid-area: "lefty"; background-color: #FFFFFF; padding-right: 40px; } .righty { grid-area: "righty"; background-color: #FFFFFF; max-height: 220px; overflow: hidden; /*border-top-left-radius: .5rem; border-top-right-radius: .5rem;*/ border-radius: .5rem; border: 1px solid #DDDDDD; position: relative; margin-top: 25px; } .righty > img { width: 100%; /*height: 100%;*/ position: absolute; bottom: 0; } .righty > figcaption { position: absolute; bottom: 0; background-color: rgba(0,0,0,.7); width: 100%; height: 33%; } .righty > figcaption > h3 { color: white; padding: .75rem; font-size: 1.25rem; position: absolute; top: -10px; } /*onmouseover="style='text-decoration: underline;'" onmouseout="style='text-decoration: none;'"*/