/**
* Block Name: banner
*/

@media (min-width: 992px) {
  section.banner .image_wrapper.col-lg-12 {
    padding: 0;
  }
}

section.banner .image_wrapper {
  position: relative;
  overflow: hidden;
  max-height: 596px;
  line-height: 0;
}

section.banner .overlay,
section.banner .gradient-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

section.banner .overlay {
  z-index: 99;
  background: linear-gradient(
      260deg,
      rgba(152, 30, 151, 0) -0.38%,
      rgba(221, 11, 22, 0.6) 100%
    ),
    linear-gradient(260deg, rgba(0, 0, 0, 0) 29.98%, rgba(0, 0, 0, 0.5) 100%);
  background-blend-mode: lighten;
}

section.banner .gradient-layer {
  background: rgba(211, 211, 211, 0.2);
  mix-blend-mode: overlay;
  z-index: 1000;
}

section.banner img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 596px;
}

section.banner .title_wrapper {
  top: -100px;
  z-index: 100;
}

section.banner .title_wrapper:has(h1),
section.banner .title_wrapper:has(h2) {
  top: -150px;
}

section.banner .heading mark {
  background-color: var(--Rot);
  color: var(--Weiss);
  padding: 2px 4px;
  line-height: 1.7;
}

section.banner .btn-secondary {
  color: var(--Schwarz);
}

/* Aqua  */

article.category-aqua section.banner .heading mark,
article.category-aqua-fr section.banner .heading mark {
  background-color: var(--AquaBlau);
}

article.category-aqua section.banner .overlay,
article.category-aqua-fr section.banner .overlay {
  background: linear-gradient(
      260deg,
      rgba(152, 30, 151, 0) -0.38%,
      rgba(0, 88, 183, 0.6) 100%
    ),
    linear-gradient(260deg, rgba(0, 0, 0, 0) 29.98%, rgba(0, 0, 0, 0.5) 100%);
}
/* Fitness */

article.category-fitness section.banner .heading mark,
article.category-fitness-fr section.banner .heading mark {
  background-color: var(--FitnessGrun);
}

article.category-fitness section.banner .overlay,
article.category-fitness-fr section.banner .overlay {
  background: linear-gradient(
      260deg,
      rgba(152, 30, 151, 0) -0.38%,
      rgba(64, 168, 41, 0.6) 100%
    ),
    linear-gradient(260deg, rgba(0, 0, 0, 0) 29.98%, rgba(0, 0, 0, 0.5) 100%);
}

/* Ice */

article.category-ice section.banner .heading mark,
article.category-ice-fr section.banner .heading mark {
  background-color: var(--IceTurkis);
}

article.category-ice section.banner .overlay,
article.category-ice-fr section.banner .overlay {
  background: linear-gradient(
      260deg,
      rgba(152, 30, 151, 0) -0.38%,
      rgba(0, 164, 173, 0.6) 100%
    ),
    linear-gradient(260deg, rgba(0, 0, 0, 0) 29.98%, rgba(0, 0, 0, 0.5) 100%);
}

/* Events */

article.category-events section.banner .heading mark,
article.category-events-fr section.banner .heading mark {
  background-color: var(--EventsLila);
}

article.category-events section.banner .overlay,
article.category-events-fr section.banner .overlay {
  background: linear-gradient(
      260deg,
      rgba(152, 30, 151, 0) -0.38%,
      rgba(152, 30, 151, 0.6) 100%
    ),
    linear-gradient(260deg, rgba(0, 0, 0, 0) 29.98%, rgba(0, 0, 0, 0.5) 100%);
}

/* Wellness */

article.category-wellness section.banner .heading mark,
article.category-wellness-fr section.banner .heading mark {
  background-color: var(--WellnessOrange);
}

article.category-wellness section.banner .overlay,
article.category-wellness-fr section.banner .overlay {
  background: linear-gradient(
      260deg,
      rgba(152, 30, 151, 0) -0.38%,
      rgba(255, 156, 27, 0.6) 100%
    ),
    linear-gradient(260deg, rgba(0, 0, 0, 0) 29.98%, rgba(0, 0, 0, 0.5) 100%);
}

@media (max-width: 992px) {
  section.banner .image_wrapper.col-lg-12 .overlay,
  section.banner .image_wrapper.col-lg-12 .gradient-layer {
    left: 15px;
    right: 15px;
    margin: 0;
    width: auto;
  }

  section.banner .image_wrapper.col-lg-12 .title_wrapper .offset-md-1 {
    margin-left: 15px;
  }
}

@media (max-width: 767px) {
  section.banner .title_wrapper {
    bottom: 20px !important;
    top: unset !important;
  }

  section.banner .title_wrapper:has(h1) {
    bottom: -10px !important;
  }

  section.banner .title_wrapper:has(h2) {
    bottom: 0 !important;
  }
}