/* =============================================================================
   GLOBAL
   ============================================================================= */

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

#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%;
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%;
z-index:1;
overflow:hidden;
margin:0 auto 0 auto;
}

/* =============================================================================
   MOBILE (max-width: 45rem)
   ============================================================================= */
@media screen and (max-width: 45rem){

:root{
--teaser-type-2-min-height:auto;
--teaser-type-2-max-height:auto;
--teaser-type-2-height:200vh;
}

#teaser_wrapper{
padding:0 .25rem;
outline:#FF0000 1px solid;
}

#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);
margin:.25rem auto .25rem auto;
}

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


}

/* =============================================================================
   TABLET PORTRAIT (45rem – 79.5rem, 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);
margin:.75rem auto .75rem auto;
}

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

}

/* =============================================================================
   TABLET LANDSCAPE (45rem – 79.5rem, 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);
margin:.75rem auto .75rem auto;
}

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

}

/* =============================================================================
   DESKTOP (min-width: 79.5rem)
   ============================================================================= */
@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);
margin:1rem auto 1rem auto;
}

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

}

/* Non-standard breakpoints */

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



}