.section-cloud {
  background-color: var(--gris-blanc);
  z-index: 2;
  position: relative;

  .container {
    padding: 25px 0 131.91px 0;

    @media screen and (max-width: 1024px) {
      padding: 100px 0;
    }

    @media screen and (max-width: 500px) {
      padding: 80px 0;
    }

    hr {
      width: 100%;
      border: 1px solid var(--gris);
      margin: 48px 0;

      @media screen and (max-width: 1024px) {
        margin: 30px 0;
      }
    }

    h2 {
      margin: 28px 0 87px 0;
      color: var(--gris);

      @media screen and (max-width: 500px) {
        margin: 28px 0 40px 0;
      }
    }

   

    .ressources {
      display: flex;
      gap: 125px;

      @media screen and (max-width: 1024px) {
        gap: 75px;
        margin-top: 50px;
      }

      @media screen and (max-width: 1000px) {
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
      }

      @media screen and (max-width: 500px) {
        gap: 40px;
      }

      img {
        border-radius: 16px;

        @media screen and (max-width: 1000px) {
          width: 70%;
          margin: 0 auto;
          display: block;
          align-self: center;
        }

        @media screen and (max-width: 500px) {
          width: 100%;
        }
      }

      .contenu {
        display: flex;
        flex-flow: column;
        justify-content: center;

        @media screen and (max-width: 1000px) {
          flex-wrap: wrap;
        }

        h3 {
          margin-bottom: 28px;
        }

        p {
          color: var(--gris);
          width: 75%;

          @media screen and (max-width: 1280px) {
            width: 85%;
          }

          @media screen and (max-width: 1024px) {
            width: 100%;
          }
        }

      }
    }
  }
}