.ih-hotspot-container {
    position: relative;
    display: block;
    max-width: 100%;
    line-height: 0;
}

.ih-hotspot-container.ih-align-left {
    margin-left: 0;
    margin-right: auto;
}

.ih-hotspot-container.ih-align-center {
    margin-left: auto;
    margin-right: auto;
}

.ih-hotspot-container.ih-align-right {
    margin-left: auto;
    margin-right: 0;
}

.ih-hotspot-container .ih-hotspot-image {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
}

.ih-hotspot {
    position: absolute;
    z-index: 10;
    text-decoration: none;
    cursor: pointer;
    background: transparent;
    border: none;
    display: block;
    overflow: visible;
}

.ih-hotspot.ih-shape-circle {
    border-radius: 50%;
}

.ih-hotspot.ih-shape-square,
.ih-hotspot.ih-shape-rectangle {
    border-radius: 0;
}

.ih-hotspot.ih-shape-polygon {
    border-radius: 0;
}

/* Hover image: starts at --ih-op-start, goes to 1 on hover */
.ih-hotspot .ih-hover-image {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-width: none;
    width: auto;
    height: auto;
    pointer-events: none;
    opacity: var(--ih-op-start, 0);
    transition: opacity 0.3s ease;
    z-index: 11;
}

.ih-hotspot:hover .ih-hover-image,
.ih-hotspot:focus .ih-hover-image {
    opacity: 1;
}

/* Feather: soft fade from centre outward */
.ih-hotspot .ih-hover-image.ih-hover-feather {
    -webkit-mask-image: radial-gradient(ellipse at center, #000 35%, transparent 72%);
    mask-image: radial-gradient(ellipse at center, #000 35%, transparent 72%);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-position: center;
    mask-position: center;
}

.ih-hotspot:focus {
    outline: 2px solid rgba(0, 120, 200, 0.5);
    outline-offset: 2px;
}