.large-image-teaser { max-width: $max-width; margin: 0 auto rem-calc(70); .image-inner-wrapper { position: relative; display: block; margin-bottom: 2em; @include -zf-breakpoint-value(auto, $grid-column-gutter) { margin-right: rem-calc($-zf-bp-value) / 2; margin-left: rem-calc($-zf-bp-value) / 2; } img { dispplay: block; width: 100%; height: auto; min-height: 320px; &[data-resize] { min-height: 0; } } .teaser-inner-txt, .teaser-inner-txt:hover { margin: 0; font-size: 1rem; padding: 18px 12px; color: $white; text-transform: uppercase; background: $green-dark; &.economy { background: $blue; } &.neutral { background: $green; } } } &.panorama-image-teaser .copyright-info { top: 0; bottom: auto; } } // Medium @include breakpoint(medium) { .large-image-teaser { margin-bottom: rem-calc(120); .image-inner-wrapper { .teaser-inner-txt, .teaser-inner-txt:hover { position: absolute; bottom: 0; left: 0; width: 100%; background: linear-gradient(to top, $green-dark 40px, rgba($green-dark, .75) 100%); &.economy { background: linear-gradient(to top, $blue 40px, rgba($blue, .75) 100%); } &.neutral { background: linear-gradient(to top, $green 40px, rgba($green, .75) 100%); } } img { min-height: 500px; &[data-resize] { min-height: 0; } }} } } // Large @include breakpoint(large) { .large-image-teaser .image-inner-wrapper { margin-right: 50px; margin-left: 50px; img { min-height: 600px; &[data-resize] { min-height: 0; } } .teaser-inner-txt, .teaser-inner-txt:hover { font-size: rem-calc(18); padding: 24px 12px; } } }