$container-height: 200vh;

.guillotine_images-group {
  .guillotine_images-row {
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;

    .guillotine_images {
      .title-paragraph {
        padding-right: calculateRem(50);
        padding-left: calculateRem(50);

        text-align: center;
      }

      .container {
        position: relative;

        height: $container-height;
        width: 100%;

        @include breakpoint(mobile) {
          display: none;
        }

        @include breakpoint(laptop) {
          display: block;
        }

        .image-container {
          position: absolute;
          top: 0;
          left: 0;

          height: $container-height;
          width: 100%;

          &.image-container-1 {
            z-index: 11;
          }

          .image {
            height: 100%;
            width: 100%;

            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
          }

          .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgb(0, 0, 0);
            opacity: 0;
            z-index: 99999999999999999;
          }
        }

        .guillotine {
          position: relative;

          height: calc(0.5 * #{$container-height});
          width: 100%;

          .guillotine-left, .guillotine-right {
            position: absolute;

            height: 100%;
            width: 50%;

            background-size: cover;
            background-attachment: fixed;
            background-position: center;

            z-index: 12;
          }

          .guillotine-left {
            top: 100%;
            left: 0;
          }

          .guillotine-right {
            top: 0;
            right: 0;
          }

          .text-container {
            position: absolute;

            max-width: 25%;

            z-index: 19;

            &.text-container-1 {
              right: 0;
              bottom: 25%;

              padding-right: calculateRem(100);
            }

            &.text-container-2 {
              top: 125%;
              left: 0;

              padding-left: calculateRem(100);
            }
          }
        }
      }

      .mobile-container {
        position: relative;

        @include breakpoint(mobile) {
          display: block;
        }

        @include breakpoint(laptop) {
          display: none;
        }

        .content {
          padding-right: calculateRem(50);
          padding-left: calculateRem(50);

          &.content-1 {
            padding-top: calculateRem(50);
            padding-bottom: calc(33.333333% + 25px);
          }

          &.content-2 {
            padding-top: calc(33.333333% + 25px);
            padding-bottom: calculateRem(50);
          }
        }

        .image-container {
          position: absolute;
          top: calc(33.333333% - 25px);

          width: 100%;

          img.image {
            width: 100%;
          }
        }
      }
    }
  }
}
