.imageHeader * { margin: 0 auto; } .imageHeader { margin-top: -2px; min-height: 400px; background-size: cover; background-position: top center; display: table; width: 100%; position: relative; } .imageHeader:before { position: absolute; content: ''; width: 100%; height: 100%; background: rgba(black, 0.2); top: 0; left: 0; } .imageHeader-title { @include transform(translateY(-30px)); @include open-sans-condensed; color: white; text-align: center; vertical-align: middle; text-transform: uppercase; width: 100%; display: table-cell; } .imageHeader-details { position: absolute; bottom: 0; left: 0; width: 100%; padding: 40px 10px 20px 10px; @include gradient(top, $trans, rgba(black, 0.6)); text-align: center; } .imageHeader-details-text { font-size: 20px; line-height: 1.2; color: white; font-weight: bold; } @media screen and (max-width: 920px) { .imageHeader { margin-top: -10px; } } @media screen and (max-width: 700px) { .imageHeader-details-text { font-size: 18px; } } @media screen and (max-width: 600px) { .imageHeader-details-text { font-size: 17px; } } @media screen and (max-width: 500px) { .imageHeader-details-text { font-size: 16px; } }