.image_popup__content {
position: relative;
}
.image_popup__content img{
object-fit: cover; }
.play-wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.play-wrapper .play-btn {
width: 48px;
min-width: 48px;
height: 48px;
border-radius: 50%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
background-color: var(--primary-color);
color: var(--white);
z-index: 1;
}
.play-wrapper .play-btn::before {
content: "";
position: absolute;
width: calc(100% + 5px);
height: calc(100% + 5px);
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
border-radius: 50%;
z-index: -1;
background-color: rgba(12, 169, 64, 0.4);
-webkit-animation: play-waves 3s ease-in-out infinite;
animation: play-waves 3s ease-in-out infinite;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.play-wrapper .play-btn::after {
content: "";
position: absolute;
width: calc(100% + 10px);
height: calc(100% + 10px);
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
border-radius: 50%;
z-index: -2;
background-color: rgba(255, 255, 255, 0.7);
-webkit-animation: play-waves 3s ease-in-out infinite;
animation: play-waves 3s ease-in-out infinite;
}
@keyframes play-waves {
0% {
-webkit-transform: translate(-50%, -50%) scale(1, 1);
transform: translate(-50%, -50%) scale(1, 1);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
-webkit-transform: translate(-50%, -50%) scale(1.5, 1.5);
transform: translate(-50%, -50%) scale(1.5, 1.5);
opacity: 0;
}
}