:root {
  --tfintro-bannerHeight: 300px;
}
@media (max-width: 840px) {
  :root {
    --tfintro-bannerHeight: 260px;
  }
}
@media (max-width: 760px) {
  :root {
    --tfintro-bannerHeight: 220px;
  }
}
@media (max-width: 420px) {
  :root {
    --tfintro-bannerHeight: 180px;
  }
}
.tf-intro-small.with-bannerimage {
  margin-bottom: 0 !important;
}
.tf-intro-small .tf-subguten-tf-intro-small {
  width: 100%;
}
.tf-intro-small .tf-intro-small-imgholder {
  position: relative;
  z-index: 9;
  overflow: clip;
  border-radius: var(--radius-700);
  margin-top: var(--margin-450);
  margin-inline: -40px;
  width: calc(100% + 80px);
  height: var(--tfintro-bannerHeight);
}
@media (max-width: 1040px) {
  .tf-intro-small .tf-intro-small-imgholder {
    width: 100%;
    margin-inline: 0;
  }
}
.tf-intro-small .tf-intro-small-imgholder img {
  position: absolute;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.tf-intro-small:has(+ .tf-background-cbgl) .tf-intro-small-imgholder {
  margin-bottom: calc(-1 * var(--tfintro-bannerHeight)/2);
}
.tf-intro-small.with-bannerimage + .tf-background-cbgl {
  padding-top: calc(var(--tfintro-bannerHeight)/2) !important;
}
.tf-intro-small.with-bannerimage + .tf-background-cbgl:before {
  margin-bottom: var(--margin-450) !important;
}