.c-timeline__item {
    position: relative;
    display: flex;
    gap: 1.5rem;
}
.c-timeline__item:last-child .c-timeline__content {
padding-bottom: 0;
}
.c-timeline__item:last-child .c-timeline__content:before {
display: none;
}
  
.c-timeline__content {
flex: 1;
position: relative;
order: 1;
padding-left: 1.5rem;
padding-bottom: 3rem;
}
.c-timeline__content:before {
content: "";
position: absolute;
right: 100%;
top: 0;
height: 100%;
width: 2px;
background-color: lightgrey;
}
.c-timeline__content:after {
content: "";
position: absolute;
left: -11px;
top: 0;
width: 20px;
height: 20px;
background-color: #fff;
z-index: 1;
border: 2px solid lightgrey;
border-radius: 50%;
}

.c-timeline__title {
font-size: max(1rem, 1.5cqw + 8px);
font-weight: bold;
margin-bottom: max(0.25rem, 0.5cqw + 4px);
}

.c-timeline__desc {
color: grey;
}
  
time {
text-align: end;
flex: 0 0 100px;
min-width: 0;
overflow-wrap: break-word;
padding-bottom: 1rem;
}
  
@container timeline (inline-size > 400px) {
.c-timeline__item {
    padding-left: 100px;
}

.c-timeline__item time {
    position: absolute;
    right: 100%;
    width: 100px;
    padding-right: 20px;
}

.c-timeline__content:after {
    left: -9px;
    width: 16px;
    height: 16px;
}
}
@container timeline (inline-size > 800px) {
.c-timeline {
    display: flex;
    justify-content: center;
}

.c-timeline__item {
    gap: 0;
    flex: 1;
    padding-left: 0;
    flex-direction: column;
    align-items: center;
}
.c-timeline__item:not(:last-child):before {
    content: "";
    position: relative;
    left: 50%;
    top: 25px;
    height: 2px;
    width: 100%;
    background-color: lightgrey;
}
.c-timeline__item:after {
    content: "";
    width: 50px;
    height: 50px;
    background-color: #fff;
    z-index: 1;
    border: 2px solid lightgrey;
    border-radius: 50%;
}

.c-timeline__item time {
    display: inline-block;
    position: initial;
    width: initial;
    padding-right: 0;
    padding-bottom: 0;
    margin-bottom: 0.5rem;
}

.c-timeline__content {
    padding-left: 0;
    padding-top: 10px;
    padding-bottom: 0;
    text-align: center;
}
.c-timeline__content:before, .c-timeline__content:after {
    display: none;
}
}
/*** Non-demo CSS ***/
main {
container: main/inline-size;
}

@container main (min-width: 300px) {
h2 {
    font-size: max(1.5rem, 4cqi);
}
}
.page {
display: grid;
grid-template-columns: 1fr;
grid-gap: 2rem;
max-width: 1170px;
margin: 2rem auto;
padding: 1rem;
}
.page .wrapper {
overflow: initial;
resize: none;
margin: 1rem 0 0 0;
max-width: initial;
}
.page main > * + * {
margin-top: 1rem;
}
@media (min-width: 650px) {
.page {
    grid-template-columns: 1fr 250px;
}
}

.hide {
display: none;
}

.wrapper {
margin: 2rem auto 0;
container: timeline/inline-size;
overflow: hidden;
resize: horizontal;
background-color: #f7f7f7;
padding: 1rem;
border-radius: 20px;
}

*,
*:before,
*:after {
box-sizing: border-box;
}

*,
*:before,
*:after {
box-sizing: border-box;
}

img {
max-width: 100%;
}

body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
padding-bottom: 5rem;
}