Timeline CSS container queries

Le code :

<div class="timeline-cq">

<ol>

<li>

<div>
<time>Janvier 2022</time>
<h3>Lorem ipsum dolor</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex alias, rem at, quas quia delectus dolorem in molestias eos id est quod voluptatibus repudiandae nostrum.</p>
</div>
</li>
	
<li>
<div>
<time>Février 2022</time>
<h3>Lorem ipsum dolor</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</li>
       
<li>
<div>
<time>Mars 2022</time>
<h3>Lorem ipsum dolor</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex alias, rem at, quas quia delectus dolorem in molestias eos id est quod voluptatibus repudiandae nostrum.</p>
</div>
</li>
      
</ol>

</div>
	

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

.timeline-cq {

max-width:900px;
margin: 4rem auto;
container: timeline/inline-size;
background-color: rgba(103, 83, 234, 0.3);
padding: 1rem;
border-radius: 1.25rem;
	
}	

.timeline-cq ol{
	
list-style-type: none;	
padding-left: 0;
margin: 0
	
	}
	
	
.timeline-cq li div{
display:grid;
grid-template: "cq";
height:100%;

}
.timeline-cq li div>*{

grid-area: cq;
margin-left:1rem

}

.timeline-cq li div::before,
.timeline-cq li div::after{

grid-area: cq;

}

	
.timeline-cq li:last-child  div::before {
  display:none
}


	
.timeline-cq li div::before {
	 
content: "";
width: 2px;
background-color: rgba(103, 83, 234, 0.3);
	 
}
	
.timeline-cq li div::after {

margin-left:-.625rem;
content: "";
width: 1.25rem;
aspect-ratio:1;
background-color: #6753ea;
box-shadow: 0 0 0 3px rgba(103, 83, 234, 0.3);
border-radius: 50%;
}

.timeline-cq h3 {
	
margin-top: 2rem;
place-self:start;
font-size: max(1rem, 1.5cqw + 8px);

}

.timeline-cq h3 + p{
	
margin-top:5rem
	
	}	
	


time {
	
place-self:start;

}


@container timeline (inline-size > 37.5rem) {
	
 .timeline-cq ol {

display: grid;
grid-template-columns: repeat(3,1fr);

  }
	
	
time{
	
justify-self:center;
margin-top: 1.5rem
	
	}
	
.timeline-cq li div::after,
.timeline-cq li div>*{
	
margin-left: unset
	
	}


.timeline-cq li:last-child  div::before {
	
display: block;
place-self: start;
	
}
	
.timeline-cq h3{
	
justify-self: center;
margin-top: 3rem
	
	}
	
.timeline-cq p{
	
padding:.5rem
	
	}	
	
.timeline-cq li div::before{
	
width: 50%;
place-self: start end;
height: 2px;
margin-top: .625rem
	
	}
	
.timeline-cq li:nth-child(2) div::before{
	
width:100%
	
	}	
	
	
.timeline-cq li div::after{
	 
	place-self:start center
	
	}
}