.image-hotspots--pin-button svg {
  transition: all 0.25s cubic-bezier(0.104, 0.204, 0.492, 1); }

.image-hotspots--pin-bubble, .image-hotspots--image {
  isolation: isolate;
  border-radius: var(--block-border-radius, 16px); }



.image-hotspots {
  display: flex;
  gap: 30px;
  flex-direction: column; }
  @media only screen and (min-width: 1068px) {
    .image-hotspots {
      gap: 60px; } }
  @media only screen and (min-width: 1068px) {
    .image-hotspots--position-image_first {
      flex-direction: row-reverse;
      align-items: center; } }
  @media only screen and (min-width: 1068px) {
    .image-hotspots--position-text_first {
      flex-direction: row;
      align-items: center; } }
  .image-hotspots--text {
    width: 100%;
    flex: 3; }
    .image-hotspots--text > *:last-child,
    .image-hotspots--text .rte > *:last-child {
      margin-bottom: 0; }
  .image-hotspots--container {
    width: 100%;
    display: block;
    position: relative;
    flex: 7; }
  .image-hotspots--content {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    padding: 20px;
    align-items: flex-start; }
    .image-hotspots--content-center {
      align-items: center; }
    .image-hotspots--content-bottom {
      align-items: flex-end; }
  .image-hotspots--pin {
    position: absolute;
    display: block;
    top: var(--mobile-top, 0px);
    left: var(--mobile-left, 0px); }
    @media only screen and (min-width: 768px) {
      .image-hotspots--pin {
        top: var(--desktop-top, 0px);
        left: var(--desktop-left, 0px); } }
    .image-hotspots--pin-button {
      width: 36px;
      height: 36px;
      background: var(--bg-body, #f5f5f5);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: 0 0 6px rgba(0, 0, 0, 0.08); }
      .image-hotspots--pin-button.hotspot--pinned:after {
        content: "";
        display: block;
        width: 36px;
        height: 36px;
        background: var(--bg-body, #f5f5f5);
        border-radius: 50%;
        opacity: 0.4;
        animation: hotspot-wave 2s ease infinite alternate;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1; }
      .image-hotspots--pin-button svg {
        display: block;
        transform-origin: center; }

@keyframes hotspot-wave {
  0% {
    transform: scale(1); }
  100% {
    transform: scale(1.45); } }
    .image-hotspots--pin-bubble {
      position: absolute;
      padding: 15px;
      background: rgba(var(--bg-body-rgb), 0.8);
      backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);
      top: calc(100% + 12px);
      left: 50%;
      transform: translate(calc(-50% + var(--content-offset, 0px)));
      color: var(--color-body, #2c2d2e);
      visibility: hidden;
      opacity: 0;
      min-width: 315px;
      font-size: 0.8125rem;
      transition: visibility 0s 0.25s, opacity 0.25s; }
      @media only screen and (min-width: 768px) {
        .image-hotspots--pin-bubble {
          padding: 26px 30px; } }
      .image-hotspots--pin-bubble p {
        font-size: inherit; }
        .image-hotspots--pin-bubble p.h6 {
          font-size: 1.0625rem;
          margin-bottom: 5px; }
        .image-hotspots--pin-bubble p:last-child {
          margin-bottom: 0; }
    .image-hotspots--pin.bottom-dot .image-hotspots--pin-bubble {
      top: auto;
      bottom: calc(100% + 12px); }
    .image-hotspots--pin.active svg {
      transform: rotateZ(315deg); }
    .image-hotspots--pin.active .image-hotspots--pin-bubble {
      opacity: 1;
      visibility: visible;
      transition: visibility 0s, opacity 0.25s; }
  .image-hotspots--image {
    overflow: hidden; }
    .image-hotspots--image .thb-placeholder svg {
      width: 560px;
      margin: 0 auto; }
  .image-hotspots--mobile {
    display: block; }
    @media only screen and (min-width: 768px) {
      .image-hotspots--mobile {
        display: none; } }
  .image-hotspots--desktop {
    display: none; }
    @media only screen and (min-width: 768px) {
      .image-hotspots--desktop {
        display: block; } }