.interactive-image-container {
    position: relative;
    border: 2px solid #DFDDDF;
    border-radius: 0.313rem;
}
.interactive-image-container .image img {
    width: 100%;
    height: auto;
    display: block;
}
.interactive-image-container .hotspot {
    position: absolute;
    background: url(../../img/hotspot.svg) no-repeat center;
    width: 1.5rem;
    height: 1.5rem;
    cursor: pointer;
    margin-top: calc(-1.5rem / 2);
    margin-left: calc(-1.5rem / 2);
    /* z-index: 10; */
}
.interactive-image-container .hotspot .hotspot-point {
    display: none;
    position: absolute;
    background: var(--color-text-default);
    color: var(--bs-white);
    top: calc(100% + 1rem);
    left: 50%;
    transform: translateX(-50%);
    width: 21.875rem;
    padding: 0.75rem;
    border-radius: 0.125rem;
    text-align: center;
    font-size: 1.125rem;
    line-height: 1.6rem;
    height: auto;
    z-index: 9999999;
}
.interactive-image-container .hotspot .hotspot-point * {
    color: var(--bs-white);
}
.interactive-image-container .fancybox-img {
    position: absolute;
    top: 0.875rem;
    right: 0.875rem;
    background-image: url('data:image/svg+xml;charset=utf-8,<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.1787 16.8555C18.3545 17.0312 18.3545 17.3125 18.1787 17.4531L17.3701 18.2617C17.2295 18.4375 16.9482 18.4375 16.7725 18.2617L12.5186 14.0078C12.4482 13.9023 12.4131 13.7969 12.4131 13.6914V13.2344C11.1123 14.3242 9.45996 14.9922 7.63184 14.9922C3.58887 14.9922 0.319336 11.7227 0.319336 7.67969C0.319336 3.67188 3.58887 0.367188 7.63184 0.367188C11.6396 0.367188 14.9443 3.67188 14.9443 7.67969C14.9443 9.50781 14.2412 11.1953 13.1514 12.4609H13.6084C13.7139 12.4609 13.8193 12.5312 13.9248 12.6016L18.1787 16.8555ZM7.63184 13.3047C10.7256 13.3047 13.2568 10.8086 13.2568 7.67969C13.2568 4.58594 10.7256 2.05469 7.63184 2.05469C4.50293 2.05469 2.00684 4.58594 2.00684 7.67969C2.00684 10.8086 4.50293 13.3047 7.63184 13.3047Z" fill="white"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-color: var(--color-secondary);
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
}
.interactive-image-container .fancybox-img > a {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    font-size: 0;
}

/* Popup */
.popup-interactive-image,
.popup-interactive-image * {
    height: 99%;
}
.popup-interactive-image .interactive-image-container {
    border: none;
    border-radius: 0;
    text-align: center;
}
.popup-interactive-image .interactive-image-container .image {
    position: relative;
    display: inline-block;
}
.popup-interactive-image .interactive-image-container .image img {
    height: 100%;
}

/* Responsive */
@media only screen and (max-width: 767px) {
    .block-image .interactive-image-container {
        overflow: hidden;
    }
    .block-image .interactive-image-container .fancybox-img {
        background-color: var(--color-white);
        background-image: url('data:image/svg+xml;charset=utf-8,<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.1787 16.8555C18.3545 17.0312 18.3545 17.3125 18.1787 17.4531L17.3701 18.2617C17.2295 18.4375 16.9482 18.4375 16.7725 18.2617L12.5186 14.0078C12.4482 13.9023 12.4131 13.7969 12.4131 13.6914V13.2344C11.1123 14.3242 9.45996 14.9922 7.63184 14.9922C3.58887 14.9922 0.319336 11.7227 0.319336 7.67969C0.319336 3.67188 3.58887 0.367188 7.63184 0.367188C11.6396 0.367188 14.9443 3.67188 14.9443 7.67969C14.9443 9.50781 14.2412 11.1953 13.1514 12.4609H13.6084C13.7139 12.4609 13.8193 12.5312 13.9248 12.6016L18.1787 16.8555ZM7.63184 13.3047C10.7256 13.3047 13.2568 10.8086 13.2568 7.67969C13.2568 4.58594 10.7256 2.05469 7.63184 2.05469C4.50293 2.05469 2.00684 4.58594 2.00684 7.67969C2.00684 10.8086 4.50293 13.3047 7.63184 13.3047Z" fill="%23271A2B"/></svg>');
        top: calc((100% / 2) - 20px);
        left: 0;
        right: 0;
        margin: auto;
        z-index: 1;
    }
    .block-image .interactive-image-container:after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.7);
    }
}