body {
  color: var(--cae-color-text);

  &>div.main {
    height: calc(100vh - var(--cae-height-mainmenu));

    &>div.workarea {
      height: 100%;
      overflow-y: scroll;

      @media(width <=768px) {
        scroll-snap-type: none;
      }

      @media(width > 768px) {
        scroll-snap-type: y mandatory;

      }

      &>div.panel {

        position: relative;

        &.mandatory-scroll-snapping {
          scroll-snap-align: start;
        }

        &.mandatory-scroll-snapping-end {
          scroll-snap-align: end;
        }

        >.background {
          position: absolute;
        }

        >.content {
          height: 100%;
        }

        &#panel1 {
          background-color: var(--cae-color-background-blue);

          [class*="triggered-"] {
            visibility: hidden;
          }

          max-height: 500px;

          >.content {
            display: flex;
            flex-direction: row;
            gap: 0;
            position: relative;

            &>.background {
              position: absolute;
              width: 100%;
              height: 100%;
              display: flex;
              align-items: center;
              justify-content: center;
              z-index: 5;

              >.svg_background {
                width: 100%;
                transform: scaleY(0.6);
              }
            }

            .horizontal-part {
              width: 50%;
              height: 100%;
            }

            .right {
              display: flex;
              align-items: center;
              justify-content: center;
              gap: 1.825em;
              color: var(--cae-color-text-inverse);
              z-index: 30;

              .boundary {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 100%;
                height: 100%;
                position: relative;
                margin-left: 1em;

                object {
                  position: absolute;
                  width: 100%;
                  height: 100%;

                  &.clouds {
                    z-index: 10;
                    height: auto;
                    max-width: 600px;
                  }
                }

                svg#digital_hub_1_aboutus {
                  position: absolute;
                  width: 80%;
                  height: 80%;
                  max-height: 320px;
                  z-index: 30;

                  .slide-down-amort {
                    -webkit-animation: slide-down-amort 2s ease-out both;
                    animation: slide-down-amort 2s ease-out both;
                    animation-delay: 0.4s;
                  }

                  .slide-up-amort {
                    -webkit-animation: slide-up-amort 1.4s ease-out both;
                    animation: slide-up-amort 1.4s ease-out both;
                    animation-delay: 0s;
                  }

                  .slide-left-amort {
                    -webkit-animation: slide-left-amort 1.3s ease-out both;
                    animation: slide-left-amort 1.3s ease-out both;
                    animation-delay: 0.3s;
                  }

                  .slide-right-amort {
                    -webkit-animation: slide-right-amort 1.4s ease-out both;
                    animation: slide-right-amort 1.4s ease-out both;
                    animation-delay: 0.5s;
                  }

                  &.fade-in, .fade-in {
                    -webkit-animation: fade-in 1.5s ease-out both;
                    animation: fade-in 1.5s ease-out both;
                  }
                }
              }
            }

            .left {

              display: flex;
              align-items: center;
              justify-content: center;
              gap: 1.825em;
              color: var(--cae-color-text-blue);
              z-index: 30;
              container-type: inline-size;

              .bloc {
                display: flex;
                flex-direction: column;
                align-items: start;
                justify-items: center;
                gap: 1.825em;
                width: 80%;
                font-size: min(2.4cqw, 1em);

                .title {
                  font-weight: 500;
                  font-size: 3.125em;
                }

                .content {
                  font-weight: 300;
                  font-size: 1.5625em;
                  text-align: justify;
                }
              }
            }
          }

          @media(width <=576px) {
            height: max(800px, calc(100vh - var(--cae-height-mainmenu)));
            --height: max(2.5cqw, calc(100vh - var(--cae-height-mainmenu)));
            --min-height: 500px;

            >.content {
              flex-direction: column-reverse;

              &>.background {

                >.svg_background {
                  transform: rotate(-90deg) scaleX(1) scaleY(2.3) translate(180px, 0px);
                  transform-origin: center;
                }

                .extend {
                  display: block;
                  background-color: #C8FBFC;
                  height: 55%;
                  width: 100vw;
                  position: absolute;
                  bottom: 0;
                }
              }

              .horizontal-part {
                width: 100%;
              }

              .left {

                .boundary {
                  margin-left: 0;
                  width: 95%;

                  svg#digital_hub_10_partners {
                    width: 65%;
                    height: 65%;
                  }

                }
              }

              .right {
                text-align: center;
                margin-bottom: 1em;
                container-type: normal;
                flex-direction: column;
                justify-content: flex-start;

                .bloc {

                  align-items: center;
                  font-size: 1em;

                  .title {
                    font-size: 1.25em;
                  }

                  .content {
                    font-size: 1em;
                    text-align: center;
                  }
                }
              }
            }
          }
        }

        &#panel2 {
          background-color: var(--cae-color-background-blue);
          color: var(--cae-color-text-blue);
          display: flex;
          align-items: center;
          justify-content: center;
          padding-top: 20px;
          height: auto;

          >.content {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;

            width: 100%;
            max-width: var(--width-main);
            margin-left: auto;
            margin-right: auto;

            >.vertical-part {

              display: flex;
              align-items: center;
              justify-content: center;
              flex-direction: row;
              gap: 2em;
              padding: 0em 2.5em;

              &.top {
                font-size: 1.875em;
                font-weight: 500;
                text-align: center;
              }

              >.row {
                gap: 40px;
              }

              .horizontal-part {

                display: flex;
                align-items: center;
                justify-content: start;
                flex-direction: column;

                .bloc {

                  .title {
                    font-weight: 500;
                    font-size: 1.5625em;
                    text-align: center;
                    margin-bottom: 1.25em;
                  }

                  .text {
                    p {
                      font-weight: 400;
                      font-size: 1.25em;
                      text-align: justify;
                    }

                  }
                }
              }
            }
          }

          @media(width >1200px) {

            .content {
              gap: 2em;
            }

            .row {
              gap: 3.125em;
            }

            .bloc {
              padding: 3.75em 2.5em 2.5em 2.5em;
            }
          }

          @media(width <=1200px) {

            .content {
              gap: 2em;
            }

            .row {
              gap: 0;
            }

            .bloc {
              padding: 3.75em 2.5em 2.5em 2.5em;
            }

            .text {
              font-size: 0.9em;
            }
          }

          @media(width <=992px) {

            .content {
              gap: 2em;
            }

            .row {
              gap: 0;
            }

            .bloc {
              padding: 2em 1em;
            }

            .text {
              font-size: 0.8em;
            }
          }

          @media(width <=768px) {

            .content {
              gap: 1em;
            }

            .row {
              gap: 0;
              flex-direction: column;
            }

            .bloc {
              padding: 1em 0;
              ;
            }

            .text {
              font-size: 0.7em;
            }
          }
        }

        &#panel3 {
          background-color: var(--cae-color-background-blue);
          color: var(--cae-color-text-blue);
          display: flex;
          align-items: center;
          justify-content: center;

          height: auto;

          >.content {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;

            width: 100%;
            max-width: var(--width-main);
            margin-left: auto;
            margin-right: auto;

            >.vertical-part {

              display: flex;
              align-items: center;
              justify-content: center;
              flex-direction: row;
              gap: 2em;
              padding: 0em 2.5em;

              &.top {
                font-size: 1.875em;
                font-weight: 500;
                text-align: center;
              }

              >.row {
                gap: 0px;
                align-items: center;
              }

              .horizontal-part {

                display: flex;
                align-items: center;
                justify-content: start;
                flex-direction: column;

                .bloc {

                  width: 100%;

                  .illustration {
                    position: relative;
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    aspect-ratio: 1;

                    .clouds {
                      width: 100%;
                    }

                    .photo {

                      width: 70%;
                      height: 70%;
                      background-size: cover;
                      background-position-x: center;
                      position: absolute;
                      top: 50%;
                      transform: translateY(-50%);
                      border-radius: 50%;

                      &.ljt {
                        background-image: url(/img/ljt.jpg);
                      }

                      &.cds {
                        background-image: url(/img/cds.jpg);
                      }

                      &.jmy {
                        background-image: url(/img/jmy.jpg);
                      }
                    }
                  }

                  .name {
                    font-size: 1.25em;
                    font-weight: 500;
                    width: 100%;
                    text-align: center;
                  }

                  .function {
                    font-size: 1.125em;
                    font-weight: 300;
                    width: 100%;
                    text-align: center;
                  }


                }
              }
            }
          }

          @media(width >1200px) {

            .content {
              gap: 2em;
            }

            .row {
              gap: 3.125em;
            }

            .bloc {
              padding: 3.75em 2.5em 2.5em 2.5em;
            }
          }

          @media(width <=1200px) {

            height: max(850px, calc(100vh - var(--cae-height-mainmenu)));

            .content {
              gap: 2em;
            }

            .row {
              gap: 0;
            }

            .bloc {
              padding: 3.75em 2.5em 2.5em 2.5em;
            }

            .text {
              font-size: 0.9em;
            }
          }

          @media(width <=992px) {
            height: max(975px, calc(100vh - var(--cae-height-mainmenu)));

            .content {
              gap: 2em;
            }

            .row {
              gap: 0;
            }

            .bloc {
              padding: 2em 1em;
            }

            .text {
              font-size: 0.8em;
            }
          }

          @media(width <=768px) {
            height: auto;

            .content {
              gap: 1em;
            }

            .row {
              gap: 0;
              flex-direction: column;
            }

            .bloc {
              padding: 1em 0;
              ;
            }

            .text {
              font-size: 0.7em;
            }
          }
        }
      }
    }
  }
}