.timeline-event{display:grid;grid-template-areas:"textbox line img";grid-template-columns:1fr auto 1fr;margin-block:3rem;.textbox { grid-area: textbox; height: fit-content; align-self: center; margin-block: 25px; padding: 0.5rem 50px; border-radius: var(--box-radius) 0 0 var(--box-radius); background-color: var(--bg-dark); } .line { grid-area: line; background-color: var(--accent); width: 5px; } .img { grid-area: img; display: flex; align-items: center; margin-block: 25px; .bar { height: 5px; width: 50px; flex: 0 0 auto; background-color: var(--accent); } img { object-fit: contain; width: 100%; height: fit-content; border-radius: var(--image-radius); } }}.timeline-event.flip{grid-template-areas:"img line textbox";.textbox { border-radius: 0 var(--box-radius) var(--box-radius) 0; } .img { flex-direction: row-reverse; }}@media(max-width:768px){.timeline-event,.timeline-event.flip{grid-template-areas:"line textbox" "line img";.textbox { margin-inline: 0; margin-block: 25px 0; padding-inline: 30px; border-radius: 0 var(--box-radius) 0 0; } .img { margin-block: 0 25px; margin-inline: 0; background-color: var(--bg-dark); padding: 0 30px 30px 30px; border-radius: 0 0 var(--box-radius) 0; img { border-radius: var(--image-radius); } .bar { display: none; } }}}.timeline-label{display:flex;height:5rem;position:relative;justify-content:center;align-items:center;margin-block:3rem;.label { position: absolute; font-size: 2em; font-weight: bold; line-height: 50px; margin: 0 50px; background-color: var(--bg); } .label.right { left: 50%; } .label.left { right: 50%; } .line { width: 5px; height: 100%; background-color: var(--accent); flex-shrink: 0; }}@media(max-width:768px){.timeline-label{justify-content:left;.label { margin: 0 30px; position: initial; }}}[class*=timeline-]~[class*=timeline-]{margin-top:-3rem}