@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_numberboxes {
    .number-box--wrapper {
      line-height: var(--bs-body-line-height-xs);

      &.with-image {
        background-size: cover !important;
        display: flex;
        align-items: flex-end;
        position: relative;
        //color: var(--bs-white);
        background-position: center;


        min-height: rfs-value(250px);
        @include media-breakpoint-up(md) {
          min-height: rfs-fluid-value(250px);
        }

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

        .number-box--title {
          position: absolute;
          top: 50%;
          right: 50%;
          transform: translate(50%, -50%);
          width: 100%;
        }
      }

      .row {
        .left-col--inner {
          padding: 1rem 0.5rem 1rem 1rem;
        }

        .right-col--inner {
          padding: 1rem 0rem 1rem 0.5rem;
        }
      }

      .number-box--title {
        text-align: center;
        color: inherit;

        > * {
          text-transform: uppercase;
          margin-bottom: 0px;
          //font-weight: $font-weight-bolder;
          //@include font-size(34px);
          //color: var(--bs-white);
          line-height: var(--bs-body-line-height-xs);
          color: inherit;
        }

        & + .number-box--content {
          margin-top: 1.25rem;
        }
      }

      .number-box--content {
        width: 100%;
        text-align: center;
        line-height: var(--bs-body-line-height-xs);

        .left--col {
          .left-col--inner {

            white-space: nowrap;
            font-weight: $font-weight-bolder;
            @include font-size(30px);

            span {
              display: inline-block;
              line-height: var(--bs-body-line-height-xs);
            }
          }
        }

        .right--col {
          .right-col--inner {
            font-weight: $font-weight-bolder;
            @include font-size(24px);

            &.with-left-col {
              border-left: 4px solid var(--bs-white);
            }

            p {
              line-height: var(--bs-body-line-height-xs);
            }
          }
        }
      }
    }
  }
}