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

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

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

#teaser{
width:100%;
height:var(--teaser-height);
overflow:hidden;
position:relative;
}

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

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

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

#teaser .card .foreground .button{
position:absolute;
top:.85rem;
right:.75rem;
width:6.75rem;
height:auto;
z-index:500;
}

#teaser .card .background{
position:absolute;
width:100%;
height:var(--teaser-height);
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-height:44.5rem;
}

#teaser .card .button{
position:absolute;
top:1.5rem;
right:1.25rem !important;
width:10rem;
height:auto;
z-index:500;
}

}

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

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

#teaser .card .button{
position:absolute;
top:1.75rem;
right:1.5rem !important;
width:12rem;
height:auto;
z-index:500;
}

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

}

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

#teaser{
float:left;
height:var(--teaser-height);
width:100%;
position:relative;
}

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

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

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


#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:46rem;
}

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

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

#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 .foreground .title{
position:absolute;
top:calc(100% - 80%);
left:0;
}

#teaser .card .button{
position:absolute;
top:1.75rem;
right:1.5rem !important;
width:12rem;
height:12rem;
z-index:1000;
}

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

}


/* Global View */
#teaser .card .foreground .title{
display:block;
width:100%;
margin:0 auto 0 auto;
padding:0;
}

#teaser .card .foreground .text{
display:block;
width:100%;
position:absolute;
top:0;
left:0;
margin:0 auto 0 auto;
text-align:center;
}