.header-wrapper *:before { box-sizing: border-box; } .header-homepage { background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6)), url(/img/bannerHome.webp), no-repeat, center; background-size: cover; position: relative; color: #fff; z-index: 0; padding-top: 160px; padding-bottom: 160px; } .header-separator-bottom { position: absolute; bottom: -1px; left: 0; width: 100%; svg { display: block; width: calc(100% + 1.3px); height: 90px; fill: $back-color; } } .header-wrapper { position: relative; } @media only screen and (min-width:768px) { h1 { font-size: 3.4em; } p { line-height: 130%; } h1.heading8 { font-size: 3.3em; } .gridContainer { width: 90%; max-width: 1232px; .row { margin-left: -15px; margin-right: -15px; clear: both; } } .header-description-row { &:before { content: normal; } &:after { content: normal; } } .header-content-centered { margin-left: auto; margin-right: auto; } .header-buttons-wrapper { margin: 0 -9px 0 -9px; clear: both; } .header-content { padding-top: 8%; padding-bottom: 8%; width: 100%; margin-left: auto; margin-right: auto; .align-holder { text-align: center !important; } } } @media only screen and (min-width: 1024px) { .gridContainer { width: 80%; } h1 { font-size: 3.8em; } p { line-height: 150%; } .header-homepage { min-height: auto; } }