body
{
  background-image: url('../img/BG-CGD.png');
  background-repeat: no-repeat;
  background-attachment: fixed;     /* l'image reste fixe quand on scroll */
  background-position: center top;  /* ou center center selon ce que tu veux */
  background-size: 100% auto;
  font-size: 16px;
}

@media (max-aspect-ratio: 1/1) {
  body {
    background-size: auto 100%;
  }
}

.banner {
      background-color: #44444471;
      color: white;
      text-align: center;
      padding: 4rem 2rem;
      margin: 30px 20%;
      border-radius: 12px;
    }

    .banner h1 {
      font-size: 2rem;
      margin-bottom: 0.5rem;
    }

    .banner p {
      font-size: 1.2rem;
    }

     .events {
      padding: 2rem;
      margin: 0 20%;
    }

    .event {
      background-color: white;
      padding: 1.5rem;
      margin-bottom: 1rem;
      border-left: 5px solid #0077cc;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }

    .event h2 {
      margin-top: 0;
    }

    .event p {
      margin: 0.3rem 0;
    }

    .text-container
    {
      padding: 2rem;
      margin: 0 20%;
      font-size: 18px;
      background-color: white;
      padding: 1.5rem;
      margin-bottom: 1rem;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
      border-radius: 20px;
    }

    .text-container i
    {
      color:grey;
    }

    .wrapper
    {
      width: 100%;
      justify-content: center;
      display: flex;
    }