.group.reflexive_image_list-group {
  .row.reflexive_image_list-row {

    @include breakpoint(mobileonly) {
      padding-right: 0;
      padding-left: 0;
    }

    padding-top: calculateRem(50);
    padding-bottom: calculateRem(50);

    &.negative-margin-top {
        @include breakpoint(tablet) {
            display: flex;
            flex-direction: column;
            margin-top: 0;
            padding-top: 0;
        }

        .reflexive_image_list {
            margin-top: calculateRem($negative-margin);
            background-color: $light;
        }
     }

    &.negative-margin-bottom {
        @include breakpoint(tablet) {
            display: flex;
            flex-direction: column;
            margin-bottom: 0;
            padding-bottom: 0;
        }
        .reflexive_image_list {
            margin-bottom: calculateRem($negative-margin);
            background-color: $light;
        }
    }

    .reflexive_image_list {
      .title-container {
        @include breakpoint(mobile) {
          display: none;
        }

        @include breakpoint(tablet) {
          display: block;
        }
        
        &:not(.animated) {
          visibility: hidden;
        }
      }
      .panes-container {
        display: flex;
        align-items: normal;
        flex-direction: column-reverse;

        border-radius: 3px;

        padding-left: 0; padding-right: 0;

        @include breakpoint(tablet) {
          flex-direction: row;
        }

        .pane {
          padding-left: 0; padding-right: 0;

          &.pane-1 {
            display: flex;
            width: 50%;
            padding: calculateRem(5) 0;
            overflow: visible;
            z-index: 9999;

            @include breakpoint(tablet) {
              margin-right: -3.33%;
            }
            @include breakpoint(laptop) {
              margin-right: -3.54%;
            }
            @include breakpoint(desktop) {
              margin-right: -3.64%;
            }

            .list {
              display: flex;
              flex-direction: column;
              justify-content: space-around;
              width: 100%;

              .list-item {
                width: 100%;
                cursor: pointer;
                background-color: transparent;
                pointer-events: none;
                flex: 1;
                margin-bottom: calculateRem(10);

                transition: background-color, color 200ms ease-in-out;
                //transition: color 300ms ease-in-out;

                &:not(.selected):hover {
                  background-color: darken($builda-gray, 20);
                  color: $primary-color;

                  .label > h4 {
                    //color: $primary-color;
                  }
                }

                .label {
                  display: flex;
                  flex: 1;
                  align-items: center;
                  padding-left: calculateRem(25);

                  h4 {
                    margin-bottom: 0;
                    font-size: calculateRem(20);

                    @include breakpoint(mobile) {
                      font-weight: 400;
                    }

                    @include breakpoint(tablet) {
                      font-weight: 700;
                    }
                  }
                }

                @include breakpoint(tablet) {
                  pointer-events: unset;
                  display: flex;
                  flex-direction: column;
                  margin: calculateRem(6) 0;
                  width: 92%;
                  background-color: $builda-darkgray;

                  .label {
                    h4 {
                      text-transform: uppercase;
                      font-size: calculateRem(14);
                    }
                  }

                  &.selected {
                    transition: all .2s ease-in;
                    transition-delay: 0.6s;
                    width: 100%;
                    color: #000000;
                    margin-right: 0;

                    &.not-delayed {
                      transition-delay: 0s;
                    }
                  }
                }

                @include breakpoint(laptop) {
                  .label {
                    h4 {
                      font-size: calculateRem(16);
                    }
                  }
                }

                @include breakpoint(desktop) {
                  margin: calculateRem(9)  0;
                  .label {
                    h4 {
                      font-size: calculateRem(20);
                    }
                  }
                }
              }
            }
          }
          &.pane-2 {
            display: flex;
            width: 100%;
            height: auto;
            transition: opacity 0.3s ease;

            .contents {
              display: flex;


              .content-item {
                background-repeat: no-repeat;
                background-size: cover;
                background-position: center;
                display: none;
                width: 100vw;
                height: 66.66vw;
                transition: all 1s ease-out;
                //&:hover {
                //  transform: scale(1.1);
                //}

                &.selected {
                  transition: display .2s;
                  display: block;
                }
              }
            }

            @include breakpoint(tablet) {
              width: 54vw;
              height: 36vw;
              .contents {
                .content-item {
                  width: 54vw;
                  height: 36vw;
                }
              }
            }
          }

          @include breakpoint(mobileonly) {
            &.pane-1, &.pane-2 {
              padding-right: 0; padding-left: 0;
              width: 100%;
            }
          }
        }

        .mobile-title-container {
          margin-top: calculateRem(30);

          padding-right: calculateRem(25);
          padding-left: calculateRem(25);

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