.highlights{
 position: absolute;
 inset: 14vh 9rem auto;
 z-index: -1;
 transition: all .3s;
 transition-delay: 1s;
}
.highlights.active{
 z-index: 99;
 transition: 0s;
 transition-delay: 0s;
}
@media (min-width: 768px){
.highlights{
 right: 14rem;
 left: auto;
 width: 320px;
}
}
@media (min-width: 992px){
.highlights{top: 20vh;}
}
@media (max-height: 800px){
.highlights{top: 5vh;}
}
.highlights > .elementlist{
 _height: 100%;
 position: relative;
}
.highlights > .elementlist > .col-12{
 pointer-events: none;
 opacity: 0;
 position: absolute;
 _inset: 0;
 background: #fff;
 box-shadow: 0 3px 6px rgb(0 0 0 / 33%);
 padding: 15px;
 transition: opacity .3s;
}
.highlights > .elementlist > .col-12.active{
 opacity: 1;
 pointer-events: auto;
}
.highlights > .elementlist > .col-12 > div{
 _height: 100%
}
.highlights > .elementlist > .col-12 .image-wrapper{
 margin: auto -15px 15px;
}
.highlights > .elementlist > .col-12 .btn{
 _position: absolute;
 bottom: 0;
 position: relative;
 top: 2rem;
}
.highlights h2{
 margin-right: 2rem;
}
.highlights .close{
 display: block;float: none;
 position: absolute;top: 5px;right: 5px;z-index: 9;
 width: 2rem;height: 2rem;overflow: hidden;
 font-size: 2.2rem;line-height: 1;text-align: center;
}
@media (min-width: 992px){
.highlights h2{
 margin-right: 3rem;
}
.highlights .close{
 top: 15px;right: 15px;
 width: 3rem;height: 3rem;
 font-size: 3rem;
}
}