.hero-section[data-type="type-2"] { position: relative; background: var(--pageTitleBackground); > .ct-container { display: flex; align-items: center; padding-top: 50px; padding-bottom: 50px; min-height: var(--pageTitleMinHeight); } > figure { position: absolute; overflow: hidden; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; > .ct-image-container { height: 100%; } &:after { position: absolute; z-index: 2; content: ''; top: 0; left: 0; right: 0; bottom: 0; background: var(--pageTitleOverlay); } } .ct-container { position: relative; z-index: 2; } .entry-header { --heroContentSpacing: 25px; width: 100%; > * { &:not(:first-child) { margin-top: var(--heroContentSpacing); } } @include media-breakpoint-up (lg) { width: 60%; margin: 0 auto; } } .entry-title, .page-title { line-height: 1.3; color: var(--pageTitleFontInitialColor); font-size: var(--pageTitleFontSize); span { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 10px; } } .page-description { font-weight: 500; opacity: 0.8; color: var(--pageTitleFontInitialColor); @include media-breakpoint-down (sm) { display: none; } } .entry-meta { color: var(--pageTitleFontInitialColor); a { color: var(--pageTitleFontInitialColor); &:hover { color: var(--pageTitleFontHoverColor); } } @include media-breakpoint-down (sm) { .avatar-container { display: none; } ul { justify-content: center; } } } .ct-meta-categories { display: flex; flex-wrap: wrap; .ct-meta-element { a { font-size: 10px; @include button(( height: 26px, padding: 10px, shadow: false, )); &:after { display: none; } } &:not(:last-child) { margin-right: 10px; } } } }