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

:root{
--teaser-height:24rem;
}

#teaser{
display:block;
width:100%;
height:var(--teaser-height);
margin:0 auto 0 auto;
overflow:hidden;
position:relative;
}

#teaser .card{
position:absolute;
top:0;
left:0;
width:100%;
height:var(--teaser-height);
display:none;
z-index:2;
}

#teaser .card:first-child{
display:block;
}

#teaser .card .foreground{
position:absolute;
top:0;
left:0;
width:100%;
height:var(--teaser-height);
margin:0;
padding:.15rem 1rem .15rem 1rem;
z-index:2;
}

#teaser .card .background{
position:absolute;
width:100%;
height:var(--teaser-height);
left:0;
top:0;
z-index:1;
overflow:hidden;
}

}


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

:root{
--teaser-height:26.25rem;
}

}

@media screen and (min-width: 45rem) and (max-width: 79.5rem) and (orientation: landscape){

:root{

--teaser-height:32rem;
}

}


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

#teaser{
display:block;
width:100%;
height:var(--teaser-height);
margin:0 auto 0 auto;
overflow:hidden;
position:relative;
}


#teaser .card{
position:absolute;
top:0;
left:0;
width:100%;
height:var(--teaser-height);
display:none;
z-index:2;
}

#teaser .card:first-child{
display:block;
}

#teaser .card .foreground{
position:absolute;
top:0;
left:0;
width:100%;
height:var(--teaser-height);
margin:0;
padding:1.75rem 1rem 1.15rem 1rem;
z-index:2;
}

#teaser .card .background{
position:absolute;
width:100%;
height:var(--teaser-height);
left:0;
top:0;
z-index:1;
overflow:hidden;
}

}





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

:root{
--teaser-height:54rem;
}

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

#teaser .card{
position:absolute;
top:0;
left:0;
display:none;
z-index:2;
width:100%;
height:var(--teaser-height);
}

#teaser .card:first-child{
display:block;
}

#teaser .card .foreground{
position:absolute;
top:0;
left:0;
width:100%;
height:var(--teaser-height);
margin:0;
padding:1.15rem 1rem 1.15rem 1rem;
z-index:2;
}

#teaser .card .background{
position:absolute;
width:100%;
height:var(--teaser-height);
left:0;
top:0;
z-index:1;
overflow:hidden;
}

}