.stories{
display:flex;
gap:14px;
padding:16px 16px 8px;
overflow-x:auto;
}

.stories::-webkit-scrollbar{
display:none;
}

.story{
display:flex;
flex-direction:column;
align-items:center;
cursor:pointer;
flex-shrink:0;
}

.story-ring{
width:66px;
height:66px;
padding:3px;
border-radius:50%;
background:linear-gradient(45deg,
#feda75,
#fa7e1e,
#d62976,
#962fbf,
#4f5bd5);
display:flex;
align-items:center;
justify-content:center;
transition:.25s;
}

.story-ring img{
width:60px;
height:60px;
border-radius:50%;
object-fit:cover;
border:3px solid white;
}

.story span{
margin-top:6px;
font-size:12px;
}

/* =========================
   STORY VIEWER
========================= */

.story-viewer{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:#000;
z-index:99999;
justify-content:center;
align-items:center;
flex-direction:column;
}

.story-viewer.active{
display:flex;
}

.story-top{
position:absolute;
top:15px;
left:0;
width:100%;
padding:0 15px;
box-sizing:border-box;
display:flex;
align-items:center;
justify-content:space-between;
}

.story-progress{
display:flex;
gap:4px;
width:calc(100% - 50px);
}

.progress-segment{
flex:1;
height:3px;
background:rgba(255,255,255,.35);
border-radius:20px;
overflow:hidden;
}

.progress-fill{

width:0%;
height:100%;
background:white;
transition:width .15s linear;
}

.story-close{
color:white;
font-size:28px;
cursor:pointer;
user-select:none;
margin-left:15px;
}

#storyImage{
max-width:100%;
max-height:100%;
object-fit:contain;
}