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

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

#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;
}

#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.25rem 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:38rem;
}

}

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

:root{

--teaser-height:40rem;
}

}


/* 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;
}

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

#teaser .card .foreground{
position:absolute;
top:0;
left:0;
width:100%;
height:var(--teaser-height);
margin:0;
padding:.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;
width:100%;
height:var(--teaser-height);
}

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

#teaser .card .foreground{
position:absolute;
top:0;
left:0;
width:auto;
height:auto;
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;
}

}