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

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

:root{
--teaser-type-2-min-height:49rem;
--teaser-type-2-max-height:auto;
--teaser-type-2-height:calc(100dvh - 10rem);
}

#teaser_wrapper{
padding:0 .75rem;
}

#teaser_type_2{
width:100%;
min-height:var(--teaser-type-2-min-height);
height:var(--teaser-type-2-height);
max-height:var(--teaser-type-2-max-height);
transition:height 150ms ease-out;
margin:.75rem auto .75rem auto;
}

#teaser_type_2{
display:grid;
grid-template-columns:1.25fr 1fr;
grid-template-rows:auto;
grid-gap:.5rem;
grid-template-areas:
"grid_1 grid_3"
"grid_1 grid_3"
"grid_1 grid_3"
"grid_2 grid_3"
"grid_2 grid_3"
"grid_4 grid_3"
"grid_4 grid_3";
}


}

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

:root{
--teaser-type-2-min-height:49rem;
--teaser-type-2-max-height:auto;
--teaser-type-2-height:calc(100dvh - 5rem);
}

#teaser_wrapper{
padding:0 .75rem;
}

#teaser_type_2{
width:100%;
min-height:var(--teaser-type-2-min-height);
height:var(--teaser-type-2-height);
max-height:var(--teaser-type-2-max-height);
transition:height 150ms ease-out;
margin:.75rem auto .75rem auto;
}

#teaser_type_2{
display:grid;
grid-template-columns:1.25fr .75fr;
grid-template-rows:auto;
grid-gap:.5rem;
grid-template-areas:
"grid_1 grid_3"
"grid_1 grid_3"
"grid_1 grid_3"
"grid_2 grid_3"
"grid_2 grid_3"
"grid_4 grid_3"
"grid_4 grid_3";
}

}

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

:root{
--teaser-type-2-min-height:49rem;
--teaser-type-2-max-height:auto;
--teaser-type-2-height:calc(100dvh - 5rem);
}

#teaser_wrapper{
padding:0 .75rem;
}

#teaser_type_2{
width:100%;
min-height:var(--teaser-type-2-min-height);
height:var(--teaser-type-2-height);
max-height:var(--teaser-type-2-max-height);
transition:height 150ms ease-out;
margin:.75rem auto .75rem auto;
}

#teaser_type_2{
display:grid;
grid-template-columns:1fr 1fr 1fr;
grid-template-rows:auto;
grid-gap:1rem;
grid-template-areas:
"grid_1 grid_1 grid_3"
"grid_1 grid_1 grid_3"
"grid_1 grid_1 grid_3"
"grid_2 grid_2 grid_3"
"grid_2 grid_2 grid_3"
"grid_4 grid_4 grid_3"
"grid_4 grid_4 grid_3";
}

}

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



}

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

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

#teaser_type_2{
min-width:79.5rem;
max-width:100rem;
width:100%;
min-height:var(--teaser-type-2-min-height);
height:var(--teaser-type-2-height);
max-height:var(--teaser-type-2-max-height);
transition:height 150ms ease-out;
margin:1rem auto 1rem auto;
}

#teaser_type_2{
display:grid;
grid-template-columns:1fr 1fr 1fr 1fr;
grid-template-rows:auto;
grid-gap:1rem;
grid-template-areas:
"grid_1 grid_1 grid_1 grid_3"
"grid_1 grid_1 grid_1 grid_3"
"grid_1 grid_1 grid_1 grid_3"
"grid_2 grid_2 grid_4 grid_3"
"grid_2 grid_2 grid_4 grid_3";
}

}

/* Global */
#teaser_type_2 .grid{
position:relative;
overflow: hidden;
background:var(--bgr-primary-500);
border-radius:var(--brd-radius-75);
}

#teaser_type_2 .grid:nth-child(1){
grid-area: grid_1;
}

#teaser_type_2 .grid:nth-child(2){
grid-area: grid_2;
}

#teaser_type_2 .grid:nth-child(3){
grid-area: grid_3;
}

#teaser_type_2 .grid:nth-child(4){
grid-area: grid_4;
}

#teaser_type_2 .card{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
overflow:hidden;
}

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

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