.interactive-image-container {
    position: relative;
    width: 100%;
    aspect-ratio: 1684.00/562.54;
    overflow: hidden;
	max-height: 620px;
}

.interactive-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.dot {
    background: var(--color-content-bg);
    border-radius: 50%;
    height: 36px;
    width: 36px;
    position: absolute;
    transform: translate(-50%, -50%);
    cursor: pointer;
    justify-items: center;
    z-index: 2;
	transition: 0.2s;
	rotate: 0deg;
}
.dot .dot_svg {
    width: 20px;
    height: 20px;
    rotate: 0deg;
    transition: rotate 0.2s ease;
}
button.dot:focus {
    outline-style: solid;
}

.dot.active .dot_svg {
    rotate: 133deg;
}
.dot_inner{
	position: relative;
}
.ringring {
    border: 4px solid #ffffff;
    -webkit-border-radius: 30px;
    height: 46px;
    width: 46px;
    position: absolute;
    left: -13px;
    top: -13px;
    -webkit-animation: pulsate 2s ease-out;
    -webkit-animation-iteration-count: infinite;
    opacity: 0.0;
}
.dot.active .ringring {
	-webkit-animation: unset;
}
@-webkit-keyframes pulsate {
    0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
    50% {opacity: 1.0;}
    100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
}

.info-card {
    position: absolute;
    background: white;
    padding: 1.5rem 2rem;
    display: none;
    z-index: 99;
    box-shadow: 0 5px 15px rgb(0 0 0 / 8%);
    margin: 0px 13px;
    width: max-content;
}
.info-card {
	text-align: left;
}
.info-card strong{
	color: #1C1917;
	font-size: 24px;
	font-style: normal;
	font-weight: 700;
}

.info-card .price { 
  font-weight: 700; 
  margin: .35rem 0 .5rem; 
}

/* Mobile tweaks for info-cards */
@media (max-width: 600px) {
  .interactive-image-container .info-card strong {
    font-size: 16px;       
    line-height: 1.2;
  }

  .interactive-image-container .info-card .price {
    font-size: 15px;         
	font-weight: 600;
    margin: .25rem 0 .4rem;
  }


  .interactive-image-container .info-card p {
    font-size: 14px;
    margin: .35rem 0;
  }
}

	
.info-card .info-link {
  display: inline-block;
  text-decoration: none;
  padding: .5rem .9rem;
  border: 1px solid #e5e7eb;
  border-radius: .5rem;
}
.info-card .info-link:hover { text-decoration: underline; }

.interactive-image-container .dot {
  z-index: 2;
}

.interactive-image-container .dot.active {
  z-index: 100;
}

.interactive-image-container .dot.active .info-card {
  z-index: 110; 
}

.interactive-image-container .dot:not(.active) {
  z-index: 2;
}