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

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

#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:0 1rem 0 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:22rem;
}
}

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

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

}


/* 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:0 1rem 0 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:26.25rem;
}

#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:0 1rem 0 1rem;
z-index:2;
}

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

}