.c-hero { position: relative; display: flex; justify-content: flex-end; flex-flow: column nowrap; min-height: 100vh; margin-bottom: 80px; padding-bottom: 80px; text-align: center; } .c-hero--half { min-height: 50vh; } .c-hero--one-third { min-height: 33.333333vh; } .c-hero--two-thirds { min-height: 66.666666vh; } .c-hero-full { min-height: 100vh; } %c-hero_left { height: 100%; text-align: left; margin-left: 95px; } %link-style { text-transform: uppercase; color: $color-accent; text-decoration: none; } .c-hero__background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; &:before { content:""; display:block; position:absolute; z-index: 2; height: 100vh; width: 100%; background-color:rgba(0, 0, 0, .3); } } .c-hero__image { width: 100%; height: 100%; object-fit: cover; } .c-hero__wrap { display: flex; align-items: left; justify-content: left; flex-flow: column nowrap; z-index: 3; @extend %c-hero_left; } .c-hero__entry-title { order: 2; margin-bottom: 0; } h1.c-hero__entry-title { color: $color-white; } .c-hero__content { order: 3; p { color: $color-white; width: 428px; margin-bottom: 48px; } } .c-hero__entry-meta, .entry-meta{ order: 1; margin-bottom: 32px; .hero_categories, .posted-on { display: inline; a { @extend %link-style; font-size: 14px; font-weight: bold; } } } .c-hero_read_more, .hero_read_more { background: $color-accent; order: 4; margin-top: 48px; max-width: 300px; a { @extend %link-style; color: $color-white; display: block; width: 100%; padding: 20px; } &:before { } } .site-description { display: none; }