@import "../../variables-layout";

@import "../../../_vendor/node_modules/bootstrap/scss/functions";
@import "../../../_vendor/node_modules/bootstrap/scss/variables";
@import "../../../_vendor/node_modules/bootstrap/scss/mixins";

@import "../../scss-variables";
@import "../../_theme/variables-layout";

html body {
  .ce_rsce_equalboxesrows {
    .row-container:not(:last-child) {
      margin-bottom: 1rem;
    }

    .row {
      .left-col--inner {
        height: 100%;
        min-height: rfs-fluid-value(500px);

        @include media-breakpoint-up(xxl) {
          min-height: rfs-value(500px);
        }

        .equal--box {
          height: 100%;
        }
      }

      .right--col {
        //margin-top: -$grid-gutter-width/2;
        //margin-bottom: -$grid-gutter-width/2;
        @include media-breakpoint-up(md) {
          //margin: rfs-value(-15px 0px);
        }

        .right-col--inner {
          @include media-breakpoint-up(md) {
            height: 100%;
            display: flex;
            flex-flow: column nowrap;
            align-items: center;
            gap: var(--bs-gutter-x);
          }

          .equal--box {
            //padding: $grid-gutter-width/2 0px;
            @include media-breakpoint-up(md) {
              flex: 1;
              width: 100%;
            }

            .box--inner {
            }
          }
        }
      }

      .equal--box {
        position: relative;

        > a {
          display: block;
          height: 100%;
          width: 100%;
          position: absolute;
          left: 0;
          top: 0;
        }

        .box--inner {
          height: 100%;
          position: relative;
          display: flex;
          flex-flow: column nowrap;
          justify-content: flex-end;
          min-height: rfs-fluid-value(450px);

          @include media-breakpoint-up(md) {
            margin-top: 0px;
            min-height: 0px;
          }

          &:hover {
            .box--content {
              .box--text {
                height: auto;
                max-height: 800px;
                opacity: 1;
              }
            }
          }

          .box--content {
            padding: 1.5rem;
            color: var(--bs-white);
            background-color: rgba(0, 0, 0, 0.4);
            z-index: 10;

            .box--headline {
              > * {
                display: block;

                &:not(.ce--subline) {
                  color: var(--bs-body-color-inverse);
                }
              }
            }

            .box--subline.ce--subline {
              margin-bottom: 0px;
            }

            .box--text {
              transition: max-height 0.75s ease-in-out, opacity 0.35s ease;
              max-height: 0px;
              opacity: 0;
              overflow: hidden;
              text-align: justify;

              > *:first-child {
                padding-top: 1rem;
              }
            }
          }
        }
      }
    }
  }
}