.component.teaser{display:block}
.component.teaser .hero{min-height:200px;position:relative}
.component.teaser .hero img{height:100%}
.component.teaser .content{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.component.teaser:not(.color) .content{padding-bottom:32px}
.component.teaser .element.background{padding:0 !important;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}
.component.teaser .element.background .content{padding:24px}
.component.teaser .flexible:not(.component.teaser .element.background .flexible){padding-top:24px}
.component.teaser .component.headline+.component.rte{margin-top:16px}
.component.teaser .links{margin-top:24px;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:start;-moz-box-align:start;-ms-flex-align:start;-webkit-align-items:flex-start;align-items:flex-start}
.component.teaser .links:after{content:"";display:table;clear:both}
.component.teaser .links a{float:left;clear:left;position:relative;word-break:break-word;padding-left:14px}
.component.teaser .links a dsm-icon-triangle svg{width:6px;height:10px;padding-right:3px}
.component.teaser .links a dsm-icon-external-link svg{top:4px}
.component.teaser .links a svg{position:absolute;vertical-align:middle;display:inline-block}
.component.teaser .links a svg.external-link{position:relative;margin-top:-12px}
.component.teaser .links a svg.triangle{margin-top:-4px;left:0;top:10px}
.component.teaser .links a+a{margin-top:6px}
@media(min-width:480px){.component.teaser.block-a .background,.component.teaser.block-b .background{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row}
.component.teaser.block-a .content:not(.component.teaser.block-b .content),.component.teaser.block-b .content:not(.component.teaser.block-b .content){padding:40px !important}
.component.teaser.block-a .hero,.component.teaser.block-a .content,.component.teaser.block-b .hero,.component.teaser.block-b .content{-webkit-box-flex:1;-webkit-flex:1 0 50%;-moz-box-flex:1;-moz-flex:1 0 50%;-ms-flex:1 0 50%;flex:1 0 50%}
.component.teaser.block-a .hero,.component.teaser.block-b .hero{height:auto;min-height:350px;max-height:600px}
.component.teaser.block-a .hero.right-image,.component.teaser.block-b .hero.right-image{-webkit-box-ordinal-group:2;-moz-box-ordinal-group:2;-webkit-order:1;-ms-flex-order:1;order:1}
.component.teaser.block-a h2,.component.teaser.block-b h2{font-size:1.875rem;line-height:2.25rem}
}
@media(min-width:769px){.component.teaser.block-d .hero{height:200px}
.component.teaser .content:not(.teaser.block-a .content){height:100%}
.component.teaser.block-b .hero{min-height:270px}
.component.teaser .block-b .component.teaser .hero+.content{height:calc(100% - 270px)}
.component.teaser .block-c .component.teaser .hero+.content{height:calc(100% - 200px)}
.component.teaser .block-d .component.teaser .hero+.content{height:calc(100% - 200px)}
.component.teaser.wide .hero{height:450px}
.component.teaser.wide .block-b .component.teaser .hero+.content{height:calc(100% - 300px)}
.component.teaser.wide .block-c .component.teaser .hero+.content{height:calc(100% - 270px)}
.component.teaser.wide .block-d .component.teaser .hero+.content{height:calc(100% - 200px)}
.component.teaser.wide .block-b .component.teaser .hero{height:300px}
.component.teaser.wide .block-c .component.teaser .hero{height:270px}
.component.teaser.wide .block-d .component.teaser .hero{height:200px}
.component.teaser .content .component{height:auto}
.component.teaser .element.background{height:100%;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex}
.component.teaser.color .content .flexible{-webkit-box-flex:1;-webkit-flex:1;-moz-box-flex:1;-moz-flex:1;-ms-flex:1;flex:1}
.component.teaser .content{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}
[class*=-split-]>.aem-Grid>.block-c .component.teaser .hero{min-height:270px}
}