@use "sass:color";
@use "_variables" as *;
@use "_mixins" as *;

.pt-two-cols {
  @include make-row();

  .title-col {
    @include make-col-ready();
    @include make-col(12);

    @include media-breakpoint-up(lg) {
      @include make-col(4);
    }

    @include media-breakpoint-up(xl) {
      @include make-col(3);
    }

    h2,
    h3 {
      font-size: 1rem;
      margin-bottom: 10px;

      @include section-label;

      &.pt-title-danger {
        color: pvar(--red);
      }
    }
  }

  .content-col {
    @include make-col-ready();
    @include make-col(12);

    @include media-breakpoint-up(lg) {
      @include make-col(8);
    }

    @include media-breakpoint-up(xl) {
      @include make-col(9);
    }
  }
}

// See https://css-tricks.com/flexbox-truncated-text/
.min-width-0 {
  min-width: 0;
}

.max-width-300px {
  max-width: 300px;
}

.w-fit-content {
  width: fit-content;
}

// ---------------------------------------------------------------------------

.d-none-mw {
  @include on-mobile-main-col {
    display: none !important;
  }
}

.d-none-sw {
  @include on-small-main-col {
    display: none !important;
  }
}

.d-inline-block-mw {
  @include on-mobile-main-col {
    display: inline-block !important;
  }
}

.d-inline-block-sw {
  @include on-small-main-col {
    display: none !important;
  }
}
