.bg-gradient {
  @extend .bg-gradient;
}

.pos-centered {
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;

  .column--kachel {
    position: relative;
    margin: auto;
  }
}

.pos-centered-right {
  transform: translate(0%, -50%);
  right: 0;
  top: 50%;

  .column--kachel {
    right: 0;
  }
}

.pos-centered-left {
  transform: translate(0%, -50%);
  left: 0;
  top: 50%;

  .column--kachel {
    left: 0;
  }
}

.pos-top-right {
  top: 0;
  right: 0;

  .column--kachel {
    top: 0;
    right: 0;
  }
}

.pos-top-left {
  top: 0;
  left: 0;

  .column--kachel {
    top: 0;
    left: 0;
  }
}

.pos-top-center {
  transform: translate(-50%, 50px);
  left: 50%;
  top: 0;

  .column--kachel {
    position: relative;
    margin: 0 auto;
  }
}

.pos-bottom-right {
  bottom: 0;
  right: 0;

  .column--kachel {
    bottom: 0;
    right: 0;
  }
}

.pos-bottom-left {
  bottom: 0;
  left: 0;

  .column--kachel {
    bottom: 0;
    left: 0;
  }
}

.pos-bottom-center {
  transform: translate(-50%, 0px);
  left: 50%;
  bottom: 0;

  .column--kachel {
    position: relative;
    margin: 0 auto;
  }
}

.two-column-text {
  @include media-breakpoint-up(lg) {
    column-count: 2;
    column-gap: var(--bs-gutter-x);
  }
}


.half-container {
  max-width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;


  @include media-breakpoint-up(sm) {
    max-width: calc(var(--bs-container-width-sm));
    padding: 0px;
  }

  @include media-breakpoint-up(md) {
    max-width: calc(var(--bs-container-width-md) / 2);
  }

  @include media-breakpoint-up(lg) {
    max-width: calc(var(--bs-container-width-lg) / 2)
  }
  @include media-breakpoint-up(xl) {
    max-width: calc(var(--bs-container-width-xl) / 2)
  }

  @include media-breakpoint-up(xxl) {
    max-width: calc(var(--bs-container-width-xxl) / 2)
  }
}


@for $n from 0 through 50 {
    .fs-#{$n}px {
        font-size: rfs-value(#{$n}px) !important;
    }
}


.w-auto{
  max-width: none !important;
  min-width: 0 !important;
}