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

.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;
	margin: auto;
}
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;
}


@media only screen and (max-width: 768px) {
	.info-card strong {
		color: #1C1917;
		font-size: 18px;
		font-style: normal;
		font-weight: 700;
	}
	.info-card p{
		    font-size: 14px;
	}
	.info-card {
    position: absolute;
    background: white;
    padding: 0.75rem 0.75rem;
	max-width: 145px;
	
	}
	.interactive-image-container {
		overflow: visible;
	}
}