.img-wrapper {
    position: relative;
    height: 0;
    padding-bottom: 55%;
    overflow: visible;
    text-align: center;
}



#myCanvas {
    position: absolute;
    pointer-events: none;
    border-radius: 13.457px;
}

.img-wrapper img {
    position: relative;
    transform: translateY(7%);
    max-width: 87%;
    height: auto;
    border-radius: 13.457px;
    box-shadow: 0px 29.79845px 65.36434px 0px rgba(0, 0, 0, 0.10), 0px 119.19379px 119.19379px 0px rgba(0, 0, 0, 0.09), 0px 269.14728px 161.48837px 0px rgba(0, 0, 0, 0.05), 0px 477.73642px 191.28682px 0px rgba(0, 0, 0, 0.01), 0px 746.88373px 209.55038px 0px rgba(0, 0, 0, 0.00);
}


.hover-info {
    display: none;
    position: absolute;
    transition: display 1s ease;
}

.hover-info-title {
    font-weight: 600;
    font-size: 24px;
}

.hover-info p {
    opacity: 0.6;
    font-size: min(15px, calc(11px + 0.6vw));
}

.hover-info[data-type="filter"] {
    width: 40%;
}

.hover-info[data-type="grouping"] {
    width: 30%;
}

.hover-info[data-type="interval"] {
    width: 30%;
}

.hover-info[data-type="aggregations"] {
    width: 60%;
}

.hover-info[data-type="preview"] {
    width: 40%;
}

.hover-info.hovered {
    display: block;
    background-color: white;
    padding: 0.5em;
    z-index: 99;
    border-radius: 12px;
    pointer-events: none;
}