.issl-story-links {
display: flex;
gap: 16px;
overflow: hidden;
padding: 16px 0;
justify-content: center;
}
.issl-story-links .link-wrapper {
flex: 0 0 74px;
width: 74px;
height: 74px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}
.issl-story-links .link-wrapper:hover::before,
.issl-story-links .link-wrapper.highlighted:hover::before {
width: 100%;
height: 100%;
background-color: #0076e2;
}
.issl-story-links .link-wrapper::before {
content: "";
background-color: #0076e2;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: calc(100% - 8px);
height: calc(100% - 8px);
border-radius: 50%;
transition: .2s linear;
}
.issl-story-links .link-wrapper.highlighted::before {
background-color: #00b88c;
animation: pulse 1.5s 2;
width: 100%;
height: 100%;
}
@keyframes pulse {
0% {
width: calc(100% - 8px);
height: calc(100% - 8px);
}
70% {
height: 100%;
width: 100%;
}
100% {
width: calc(100% - 8px);
height: calc(100% - 8px);
}
}
.issl-story-link {
background-color: #e7edf3;
overflow: hidden;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
width: calc(100% - 6px);
height: calc(100% - 6px);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
padding-inline: 6px;
}
@keyframes border-pulse {
0% {
border-color: #4CAF50;
}
50% {
border-color: red;
}
100% {
border-color: #4CAF50;
}
}
.issl-story-link img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
}