.timeline.card{
    flex-direction: row;
    flex-wrap: wrap;
    width:var(--width);
    border: 1px solid rgba(0,0,0,.13);
    padding: .618em;
    margin:1lh auto 2lh;
    margin-inline:auto;
    transition: all .5s linear;
    gap:0 1ch;
    background-color: rgba(255,255,255,.5);
    position: relative;
}

.grid .timeline.card{
    width: auto;
    margin-block: 1lh 0
}

.timeline.card.at-center{
    background-color: rgba(255,255,255,1);
    border-color: rgba(0,0,0,.35);
    border-color: rgba(0,102,255,.55);
    box-shadow:0 0 2ch rgba(0,0,0,.02),0 0 3ch rgba(0,0,0,.02),0 0 4ch rgba(0,0,0,.02),0 0 5ch rgba(0,0,0,.02),0 0 6ch rgba(0,0,0,.02);
}

@media(hover:hover){
    .timeline.card:hover{
        background-color: rgba(255,255,255,1);
        border-color: rgba(0,0,0,.35);
        border-color: rgba(0,102,255,.55);
        box-shadow:0 0 2ch rgba(0,0,0,.02),0 0 3ch rgba(0,0,0,.02),0 0 4ch rgba(0,0,0,.02),0 0 5ch rgba(0,0,0,.02),0 0 6ch rgba(0,0,0,.02);
    }
}

details summary,
details[open] summary{
    list-style: none;
    padding: 0;
    border: none;
}

.date{
    color: #888;
    font-weight: 377;
    font-family: merriweather
}

summary>span{
    color: #555;
    font-weight: 377
}

summary>span i{font-family: merriweather}
.timeline.card.at-center summary>span{color: #06f}
@media(hover:hover){.timeline.card:hover summary>span{color: #06f}}
details[open] summary .rm{display: none}
details[open] summary .rl{display: block}
.timeline.card.at-center .date{color: #333}
@media(hover:hover){.timeline.card:hover .date{color: #333}}
            
.timeline.card h3{
    font-family: 'roboto flex',roboto,system-ui;
    line-height: 1.05;
    font-weight: 610;
    font-stretch: 34%;
    font-variation-settings:"GRAD" -144, "opsz" 55;
    text-wrap:pretty;
    color: #333;
    padding-right: .618em;
}

.timeline.card[open] h3,
.timeline.card.at-center h3{
    font-variation-settings:"GRAD" 0, "opsz" 55;
    color:#000
}
            
details>div{
    display: flex;
    gap: 1ch;
    align-items: flex-start;
    margin-block: 0!important;
}
            
.timeline.card figure{
    margin-top: 1ch!important;
    flex: 1 1 38%;
    border-radius: .236em;
    width: 100%;
}
            
details figure img{
    aspect-ratio: 1;
    width: 100%;
    height: 100%;
}

.timeline.card p{
    margin-top: 1ch;
    font-family: roboto;
    color: #000;
    flex: 1 1 62%;
}

.timeline.card:not(:has(figure)) p{flex: 1 1 100%}

@media(min-width:calc(62ch + 2em)){
    details figure img{aspect-ratio: 1.618/1}
}

@media (hover: hover) {
    details summary:hover{background: none}
    .timeline.card:has(img,h3 a):hover :is(a,img){filter: brightness(1)}
}