arthurdanjou.fr/components/Home/process/process.scss

#process {
  height: 90vh;
  width: 100%;
  background-color: #1c1c1c;
  color: rgba(255, 255, 255, 0.3);

  @media screen and (max-width: 700px) {
    height: 130vh;
  }

  .process-container {
    width: 100%;
    height: 90vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    flex-direction: row;

    @media screen and (max-width: 700px) {
      height: 130vh;
      padding: 10px;
      flex-direction: column;
      text-align: center;
    }

    .process-left {
      width: 50%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-self: center;

      @media screen and (max-width: 700px) {
        width: 100%;
        height: 130vh;
      }

      .processus {
        width: 80%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-self: center;
        padding-bottom: 30px;

        .color {
          color: #fcd9ff;
        }

        h1 {
          color: white;
          font-size: 1.5rem;
          align-self: center;

          &:after {
            margin: 7px auto;
            width: 40px;
            height: 2px;
            display: block;
            content: "";
            background-color: #ff00f2;
          }
        }

        p {
          align-self: center;
          text-align: justify;
          font-size: 1.2rem;
        }
      }
    }

    .process-right {
      width: 50%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-self: center;

      @media screen and (max-width: 700px) {
        display: none;
      }

      img {
        margin: 0 auto;
        width: 65%;
      }
    }

  }
}