.primary-content-area{ .content-banner-block{ figure{ background-size: contain; } } } .content-banner-block { figure { position: relative; margin-bottom: 20px; background-size: cover; background-position: center; background-repeat: no-repeat; height: 200px; figcaption { position: absolute; bottom: 0; left: 0; padding: 2px $xs-space; background-color: $orange; color: #fff; } } h3 { margin-bottom: 20px; a { font-size: inherit; color: inherit; } } .content-banner-block-no-border{ border-top: none; padding-top: 0px; padding-bottom: $xs-space; } .content-banner-block-item { p{ &:last-child{ margin-bottom: 0px; } } h1{ margin-bottom: $sm-space; } } } .container-fluid.no-padding{ .content-banner-block-item{ &:first-child{ figure{ min-height: 250px; transition: min-height 0.3s ease; @include media-breakpoint-up(sm) { min-height: 600px; } } } } } .contentbannerblock{ margin-bottom: $md-space; } .video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } .video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } @element .content-banner-block and (min-width: 400px) { :self .content-banner-block-item figure { height: 250px; } } @element .content-banner-block and (min-width: 600px) { :self .content-banner-block-item figure { height: 300px; } } @element .content-banner-block and (min-width: 900px) { :self .content-banner-block-item figure { min-height: 600px; } }