#teaser_wrapper{
grid-area:teaser;
background:var(--bgr-primary-300);
padding:0;
}

/* Mobile View > till Tablet */
@media screen and (max-width: 45rem){

:root{
--teaser-min-height:28rem;
--teaser-max-height:30rem;
--teaser-height:calc(100dvh - var(--top-height));
}

#teaser{
width:100%;
min-height:var(--teaser-min-height);
height:var(--teaser-height);
max-height:var(--teaser-max-height);
transition:height 150ms ease-out;
overflow:hidden;
position:relative;
}

#teaser .card{
position:absolute;
top:0;
left:0;
z-index:2;
width:100%;
min-height:var(--teaser-min-height);
height:var(--teaser-height);
max-height:var(--teaser-max-height);
transition:height 150ms ease-out;
}

#teaser .card .foreground{
position:absolute;
top:0;
left:0;
width:100%;
min-height:var(--teaser-min-height);
height:var(--teaser-height);
max-height:var(--teaser-max-height);
transition:height 150ms ease-out;
margin:0;
padding:0 1rem 0 1rem;
z-index:2;
}

#teaser .card .background{
position:absolute;
width:100%;
min-height:var(--teaser-min-height);
height:var(--teaser-height);
max-height:var(--teaser-max-height);
transition:height 150ms ease-out;
left:0;
top:0;
z-index:1;
overflow:hidden;
}

}

/* Mobile View > Tablet > Portrait */
@media screen and (min-width: 45rem) and (max-width: 79.5rem) and (orientation: portrait){

:root{
--teaser-min-height:36rem;
--teaser-max-height:38rem;
--teaser-height:calc(100dvh - var(--top-height));
}

}

/* Mobile View > Tablet > Landscape */
@media screen and (min-width: 45rem) and (max-width: 79.5rem) and (orientation: landscape){

:root{
--teaser-min-height:36rem;
--teaser-max-height:38rem;
--teaser-height:calc(100dvh - var(--top-height));
}

}

/* Mobile View > Tablet */
@media screen and (min-width: 45rem) and (max-width: 79.5rem){

#teaser{
float:left;
min-height:var(--teaser-min-height);
height:var(--teaser-height);
max-height:var(--teaser-max-height);
transition:height 150ms ease-out;
width:100%;
position:relative;
}

#teaser .card{
position:absolute;
top:0;
left:0;
z-index:2;
width:100%;
min-height:var(--teaser-min-height);
height:var(--teaser-height);
max-height:var(--teaser-max-height);
transition:height 150ms ease-out;
}

#teaser .card .foreground{
position:absolute;
top:0;
left:0;
width:100%;
min-height:var(--teaser-min-height);
height:var(--teaser-height);
max-height:var(--teaser-max-height);
transition:height 150ms ease-out;
margin:0;
padding:0 1rem 0 1rem;
z-index:2;
}

#teaser .card .foreground .title{
position:absolute;
top:calc(100% - 80%);
left:0;
}

#teaser .card .background{
position:absolute;
width:100%;
min-height:var(--teaser-min-height);
height:var(--teaser-height);
max-height:var(--teaser-max-height);
transition:height 150ms ease-out;
left:0;
top:0;
z-index:1;
overflow:hidden;
}


}

/* Desktop View */
@media screen and (min-width: 79.5rem){

:root{
--teaser-min-height:49rem;
--teaser-max-height:54rem;
--teaser-height:calc(100dvh - 15rem);
}

#teaser{
display:block;
min-width:79.5rem;
max-width:100rem;
width:100%;
min-height:var(--teaser-min-height);
height:var(--teaser-height);
max-height:var(--teaser-max-height);
transition:height 150ms ease-out;
margin:0 auto 0 auto;
overflow:hidden;
position:relative;
}

#teaser .card{
position:absolute;
top:0;
left:0;
z-index:2;
width:100%;
min-height:var(--teaser-min-height);
height:var(--teaser-height);
max-height:var(--teaser-max-height);
transition:height 150ms ease-out;
}

#teaser .card .foreground{
position:absolute;
top:0;
left:0;
width:100%;
min-height:var(--teaser-min-height);
height:var(--teaser-height);
max-height:var(--teaser-max-height);
transition:height 150ms ease-out;
margin:0;
padding:0 1rem 0 1rem;
z-index:2;
}

#teaser .card .background{
position:absolute;
width:100%;
min-height:var(--teaser-min-height);
height:var(--teaser-height);
max-height:var(--teaser-max-height);
transition:height 150ms ease-out;
left:0;
top:0;
z-index:1;
overflow:hidden;
margin:0 auto 0 auto;
}

}



/* Mobile View > till Tablet */
@media screen and (max-width: 45rem){

#teaser_wrapper .card .foreground .title{
font-family:var(--teaser-font-family), sans-serif;
}

#teaser_wrapper .card .foreground .title .ol,
#teaser_wrapper .card .foreground .title .hl,
#teaser_wrapper .card .foreground .title .sl{
clear:both;
float:left;
width:100%;
color:var(--clr-primary-100);
margin:0;
padding:0;
}

#teaser_wrapper .card .foreground .title .ol{
font-size:var(--fs-l);
}

#teaser_wrapper .card .foreground .title .hl{
font-size:var(--fs-l);
}

#teaser_wrapper .card .foreground .title .sl{
font-size:var(--fs-xl);
}

#teaser_wrapper .card .foreground .text > *{
color:var(--clr-primary-100);
font-size:var(--fs-m);
line-height:1rem;
}

}

/* Tablet and above */
@media screen and (min-width:45rem){

#teaser_wrapper .card .foreground .title{
font-family:var(--teaser-font-family), sans-serif;
text-transform:uppercase;
}

#teaser_wrapper .card .foreground .title .ol,
#teaser_wrapper .card .foreground .title .hl,
#teaser_wrapper .card .foreground .title .sl{
clear:both;
float:left;
width:100%;
color:var(--clr-primary-100);
margin:0;
padding:0;
}

#teaser_wrapper .card .foreground .title .ol{
font-size:var(--fs-l);
}

#teaser_wrapper .card .foreground .title .hl{
font-size:var(--fs-l);
}

#teaser_wrapper .card .foreground .title .sl{
font-size:var(--fs-xl);
}

#teaser_wrapper .card .foreground .text > *{
color:var(--clr-primary-100);
font-size:var(--fs-m);
line-height:1rem;
}

}