.component_mapshot{
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    .wrapper{
        position: relative;
        .marker{
            position: absolute;
            z-index: 1;
            img{width: 30px; height: 30px;}
        }
        &:hover .bigpicture{
            transition: 0.4s ease transform;
            transform: scale(3);
        }
        .bigpicture{
            transition: 0.2s ease transform;
            .line{
                display: flex;
                width: 33.33%;
                img{ filter: grayscale(10%); }
                .btl{border-top-left-radius: 2px;}
                .btr{border-top-right-radius: 2px;}
                .bbl{border-bottom-left-radius: 2px;}
                .bbr{border-bottom-right-radius: 2px;}
            }
        }
        .mapshot_placeholder{
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 2;
            border-radius: 2px;
            background: var(--color);
            span{
                display: flex;
                height: 100%;
                width: 100%;
                .component_loader, div{
                    margin: auto;
                    color: var(--light);
                    svg{height: 50px;}
                }
            }
        }
    }
    &.loaded .mapshot_placeholder{display: none;}
    &.error .mapshot_placeholder.loading{display: none;}
}