.how-it-works{
	background-image: url('../img/how it works/background.svg');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

.how-it-works__container{
	position: relative;
	
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(1rem, 0.8rem + 1vw, 2rem);
}

.how-it-works__heading{
	display: flex;
	flex-direction: column;
	gap: clamp(0.5rem, 0.4rem + 0.5vw, 1rem);
	
	text-align: center;
}

.how-it-works__title--accent{
	position: relative;
}

.how-it-works__title--accent::after{
    content: "";

    position: absolute;
    bottom: -35%;
    left: 50%;
    z-index: -1;

    transform: translateX(-50%) rotate(-1.25deg);

    width: 110%; /* Valeur à modifier en fonction de la taille du texte - NE RIEN TOUCHER D'AUTRE */
    aspect-ratio: 8.427/1;

    background-image: url("../img/stroke.svg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.how-it-works__steps {
  list-style: none;

  width: min(100%, 1000px);
  margin-inline: auto;

  padding-block: 2rem;
}

.how-it-works__step-container {
    display: grid;
    grid-template-columns: 1fr 4fr;
  
    /* background: red; */
  }

.how-it-works__lcol {  
  /* background: blue; */
  
  position: relative;
  width: fit-content;
  margin-inline: auto;

  display: flex;
  flex-direction: column;
  justify-content: center;
  
  > img {   
    position: relative;
    z-index: 1;

	padding: 0.5rem;

	background: #39313E;
	background: radial-gradient(circle,rgba(57, 49, 62, 1) 20%, rgba(45, 37, 51, 1) 70%);
	border: 2.5px solid rgba(255, 255, 255, 0.25);
	border-radius: clamp(0.75rem, 0.725rem + 0.125vw, 0.875rem);
  }
}

.how-it-works__timeline {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  
  width: 2.5px;
  height: 100%;
  background: white;
}

.how-it-works__step-container:first-child .how-it-works__timeline {
	top: 50%;
	
	height: 50%;
}

.how-it-works__step-container:last-child .how-it-works__timeline {
	height: 50%;
}

.how-it-works__rcol {
  /* background: green; */

	display: flex;
	flex-direction: column;
	gap: clamp(0.5rem, 0.45rem + 0.25vw, 0.75rem);

  padding-inline-start: 1rem;
  padding-block-end: 2rem;
}

.how-it-works__step-container:last-child .how-it-works__rcol {
	margin-block-end: unset;
}