.teaser-progressbar{
background: linear-gradient(to right, rgba(255,255,255,.25) 0%,rgba(255,255,255,.95) 100%);
position:absolute;
bottom:0;
left:0;
width:0px;
height:2px;
z-index:20;
opacity:1;
}

#teaser_wrapper{
grid-area:teaser;
position:relative;
}

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

/* Tab icon */
#teaser_wrapper .tab{
float:left;
position:absolute;
width:100%;
bottom:.65rem;
z-index:50;
}

}

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

/* Tab icon */
#teaser_wrapper .tab{
float:left;
position:absolute;
width:100%;
bottom:1rem;
z-index:50;
}

}

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

/* Tab icon */
#teaser_wrapper .tab{
float:left;
position:absolute;
width:100%;
bottom:.75rem;
z-index:50;
}

}

#teaser_wrapper .tab ul{
display:flex;
justify-content:center;
align-items:center;
list-style-type:none;
margin:0;
padding:0;
}

#teaser_wrapper .tab li{
display:flex;
align-items:center;
margin:0 .25rem;
padding:0 .15rem;
width:auto;
}

#teaser_wrapper .tab li:before{
display:none
}

#teaser_wrapper .tab button,
#teaser_wrapper .tab a{
display:inline-block;
text-align:center;
margin:0;
padding:0;
}

#teaser_wrapper .tab button span,
#teaser_wrapper .tab a span{
display:none;
}

#teaser_wrapper .tab button,
#teaser_wrapper .tab button.off,
#teaser_wrapper .tab a,
#teaser_wrapper .tab a.off{
color:#FFF;
font-weight:normal;
border:1px solid transparent;
background:var(--bgr-primary-400);
transition:opacity, width 250ms ease-in;
border-radius:var(--brd-radius-15);
}

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

#teaser_wrapper .tab button:hover,
#teaser_wrapper .tab a:hover{
border:var(--clr-primary-100) 1px solid;
background:var(--bgr-primary-300);
}

}

#teaser_wrapper .tab button.on,
#teaser_wrapper .tab a.on{
color:#FFF;
font-weight:normal;
border:var(--clr-primary-100) 1px solid;
background:var(--bgr-primary-300);
border-radius:var(--brd-radius-15);
}


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

#teaser_wrapper .tab button,
#teaser_wrapper .tab button.off,
#teaser_wrapper .tab a,
#teaser_wrapper .tab a.off{
width:1.95rem;
height:.45rem;
}

#teaser_wrapper .tab button.on,
#teaser_wrapper .tab a.on{
width:3.95rem;
height:.45rem;
}

}

/* Tablet and above */
@media screen and (min-width: 45rem){

#teaser_wrapper .tab button,
#teaser_wrapper .tab button.off,
#teaser_wrapper .tab a,
#teaser_wrapper .tab a.off{
width:1.95rem;
height:.35rem;
}

#teaser_wrapper .tab button.on,
#teaser_wrapper .tab a.on{
width:3.95rem;
height:.35rem;
}

}


#teaser_wrapper .card{
display:none;
}

#teaser_wrapper .card.show{
display:block;
}