/* responsive.css */

@media (max-width: 420px){
  #main_container {
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 20px 0;
  }

  .first_slide,
  .seconde_slide,
  .third_slide {
    width: 90%;
    max-width: 300px;
  }
  .first_slide{
    margin-top: 20px;
  }
  .third_slide{
    margin-bottom: 20px;
  }
 
  h2, h3, h4 {
    font-size: 24px;
    text-align: left;
    margin-left: 0;
  }

  p {
    font-size: 14px;
    margin-left: 0;
  }


  a{
    margin-top: 20px;
  margin-bottom: 20px;
  }
  
}