.hotspot {
    height: 1.25rem;
    line-height: 1.07;
    position: absolute;
    transform: translate(-50%, -50%);
    width: 1.25rem;
    z-index: 1
}

@media screen and (min-width:768px) {
    .hotspot {
        height: 2.4375rem;
        width: 2.4375rem
    }
}

.hotspot.is-open {
    z-index: 101
}

.hotspot--enter-active,
.hotspot--leave-active {
    transition: opacity .3s ease-in-out, transform .3s ease-in-out
}

.hotspot--enter-from,
.hotspot--leave-to {
    opacity: 0;
    transform: translate(.375rem, .375rem)
}

.hotspot__btn {
    background: #fff;
    border: none;
    border-radius: 50%;
    box-shadow: none;
    height: 1.25rem;
    padding: 0;
    position: relative;
    transform: scale(.7);
    transition: transform .3s cubic-bezier(.68, -.55, .27, 1.55);
    width: 1.25rem;
    z-index: 101
}

@media screen and (min-width:768px) {
    .hotspot__btn {
        height: 2.4375rem;
        width: 2.4375rem
    }
}

.hotspot__btn:hover {
    transform: scale(.8)
}

.is-open .hotspot__btn {
    transform: scale(1)
}

.hotspot__btn-icon {
    height: .5625rem;
    left: 50%;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%) translate(-50%) scale(0);
    transition: opacity .3s ease-in-out, transform .2s ease-in-out;
    transition-delay: .15s;
    width: .5625rem
}

@media screen and (min-width:768px) {
    .hotspot__btn-icon {
        height: .875rem;
        width: .875rem
    }
}

.is-open .hotspot__btn-icon {
    opacity: 1;
    transform: translateY(-50%) translate(-50%) scale(1)
}

.hotspot__detail {
    display: grid;
    grid-template-columns: 39.5% 1fr;
    width: 25rem
}

@media screen and (max-width:768px) {
    .hotspot__detail {
        grid-template-columns: 0 100%;
        width: 16.875rem
    }
}

@media screen and (min-width:992px) {
    .hotspot__detail {
        width: 40.25rem
    }
}

.hotspot__detail-content {
    padding: .9375rem 1.5625rem .5rem
}

@media screen and (min-width:768px) {
    .hotspot__detail-content {
        padding: 1.25rem 3.25rem .625rem 1.875rem
    }
}

.hotspot__detail-content .wysiwyg {
    overflow: hidden
}

.hotspot__detail-title {
    font-size: 1.125rem
}

@media screen and (min-width:768px) {
    .hotspot__detail-title {
        font-size: 1.375rem
    }
}

.hotspot__detail-content .btn-wishlist {
    background: none;
    border: 0;
    color: currentColor;
    line-height: 1;
    padding: .625rem;
    position: absolute;
    right: 0;
    top: 0
}

@media screen and (min-width:768px) {
    .hotspot__detail-content .btn-wishlist {
        right: 1.25rem;
        top: 1.25rem
    }
}

.hotspot__detail-content .btn-wishlist__icon {
    height: 1.125rem;
    width: 1.125rem
}

@media screen and (min-width:768px) {
    .hotspot__detail-content .btn-wishlist__icon {
        height: 1.25rem;
        width: 1.25rem
    }
}