.story-timeline{
max-width:980px;
margin-left:auto;
margin-right:auto;
}

.story-mobile-timeline{
display:none;
}

.story-row{
display:flex;
align-items:start;
margin-bottom:72px;
}

.story-media-panel{
flex:0 0 50%;
max-width:50%;
box-sizing:border-box;
padding:0 52px;
}

.timeline{
position:relative;
margin-top:40px;
padding:20px 0;
}

.timeline::before{
content:"";
position:absolute;
left:50%;
top:0;
bottom:0;
width:1px;
background:rgba(69,78,62,0.5);
transform:translateX(-50%);
}

.timeline-item{
position:relative;
width:50%;
padding:0 52px 72px;
box-sizing:border-box;
}

.timeline-item::before{
content:"";
position:absolute;
top:42px;
width:9px;
height:9px;
border-radius:50%;
background:#fffdf7;
border:1px solid #506047;
z-index:1;
}

.timeline-item-left{
margin-right:auto;
text-align:right;
}

.timeline-item-left::before{
right:-4px;
}

.timeline-item-right{
margin-left:auto;
text-align:left;
}

.timeline-item-right::before{
left:-4px;
}

.story-row .timeline-item{
flex:0 0 50%;
max-width:50%;
width:auto;
box-sizing:border-box;
padding:0 52px;
}

.story-media-panel .timeline-media{
width:100%;
}

.timeline-card{
background:rgba(255,255,255,0.52);
padding:18px 22px 22px;
border-radius:28px;
backdrop-filter:blur(1px);
}

.timeline-label{
margin:0 0 4px;
font-size:11px;
letter-spacing:0.28em;
text-transform:uppercase;
color:#6c7b67;
}

.timeline h3{
font-size:42px;
font-weight:500;
line-height:0.9;
margin-bottom:8px;
}

.timeline-time{
font-size:14px;
letter-spacing:0.16em;
text-transform:uppercase;
color:#3f513d;
margin-bottom:14px;
}

.timeline-card p:last-child{
margin-bottom:0;
}

.timeline-card .timeline-media{
margin-top:18px;
}

@media (max-width:768px){

.story-timeline{
display:none;
}

.story-mobile-timeline{
display:grid;
gap:28px;
margin:30px auto 0;
max-width:420px;
position:relative;
}

.story-mobile-timeline::before{
content:"";
position:absolute;
top:34px;
bottom:34px;
left:18px;
width:1px;
background:linear-gradient(
180deg,
rgba(80,96,71,0),
rgba(80,96,71,0.42) 12%,
rgba(80,96,71,0.42) 88%,
rgba(80,96,71,0)
);
}

.story-mobile-card{
position:relative;
margin-left:28px;
background:rgba(255,253,247,0.68);
border:1px solid rgba(119,91,58,0.13);
border-radius:30px;
box-shadow:0 18px 48px rgba(92,69,43,0.13);
overflow:hidden;
text-align:left;
backdrop-filter:blur(2px);
}

.story-mobile-card::before{
content:"";
position:absolute;
top:26px;
left:-15px;
width:11px;
height:11px;
border-radius:50%;
background:#fffdf7;
border:1px solid #506047;
box-shadow:0 0 0 6px rgba(255,253,247,0.74);
z-index:2;
}

.story-mobile-photo{
position:relative;
height:210px;
overflow:hidden;
background:rgba(255,255,255,0.45);
}

.story-mobile-photo::after{
content:"";
position:absolute;
inset:auto 0 0;
height:58px;
background:linear-gradient(180deg, rgba(255,253,247,0), rgba(255,253,247,0.9));
pointer-events:none;
}

.story-mobile-photo img{
display:block;
width:100%;
height:100%;
object-fit:cover;
object-position:center;
}

.story-mobile-copy{
padding:18px 20px 22px;
}

.story-mobile-copy h3{
font-size:34px;
font-weight:500;
line-height:0.95;
margin:0 0 8px;
}

.story-mobile-copy p:last-child{
margin-bottom:0;
}

.timeline-item,
.timeline-card{
text-align:left;
}

.story-row{
display:flex;
flex-direction:column;
margin-bottom:36px;
}

.story-media-panel{
max-width:none;
padding:0 0 36px 28px;
}

.story-media-panel-left{
order:2;
}

.story-media-panel-right{
order:2;
}

.story-row .timeline-item{
order:1;
}

.timeline{
padding-left:26px;
}

.timeline::before{
left:4px;
transform:none;
}

.timeline-item{
width:100%;
padding:0 0 36px 28px;
}

.timeline-item::before{
left:0;
right:auto;
top:28px;
}

.timeline h3{
font-size:34px;
}

.story-row .timeline-item{
max-width:none;
padding:0 0 36px 28px;
}

}