/* breakpoints */
.heroelement {
  background-color: var(--clr-primary);
  --font-clr: var(--white);
  --graphic-offset: 100px;
}
.heroelement .hero {
  position: relative;
}
.heroelement .hero__slide {
  display: grid;
  grid-auto-columns: 6fr;
  grid-auto-rows: 7fr;
}
.heroelement .hero__slide--image {
  z-index: 1;
  grid-column: 3 / 6;
  grid-row: 1 / 7;
}
@media (min-width: 1660px) {
  .heroelement .hero__slide--image {
    grid-column: 4 / 6;
  }
}
.heroelement .hero__slide--image img {
  mask-image: url("/resources/themes/heimattage/images/hero_mask.svg");
  mask-size: 100%;
  mask-repeat: no-repeat;
  mask-position: bottom left;
}
@media (max-width: 767.98px) {
  .heroelement .hero__slide--image img {
    mask-position: top left;
  }
}
.heroelement .hero__slide--content {
  z-index: 10;
  grid-column: 1 / 6;
  grid-row: 3 / 5;
}
.heroelement .hero:has(> .hero__graphic--wrapper) {
  padding-bottom: var(--graphic-offset);
}
.heroelement .hero__graphic--wrapper {
  position: absolute;
  bottom: calc(var(--graphic-offset) - 150px);
  left: 0;
  width: 100%;
  pointer-events: none;
  user-select: none;
  z-index: 10;
}
@media (max-width: 767.98px) {
  .heroelement .custom-phone {
    margin-top: -25px;
  }
  .heroelement .btn-secondary {
    font-size: 0.8rem;
  }
  .heroelement .hero__slide {
    display: flex;
    flex-direction: column;
    grid-auto-columns: unset;
    grid-auto-rows: unset;
    padding: 0;
  }
  .heroelement .hero__slide--image, .heroelement .hero__slide--content {
    grid-column: unset;
    grid-row: unset;
  }
  .heroelement .hero__slide--image {
    align-self: flex-end;
  }
  .heroelement .hero__slide--image svg {
    height: auto;
    max-height: 350px;
  }
  .heroelement .hero__slide--image image {
    transform: translateX(20%);
  }
  .heroelement .hero__graphic--wrapper {
    bottom: 0;
    --graphic-offset: 40px;
  }
  .heroelement .d-flex.flex-column.gap-3.align-items-start {
    margin-top: -4.5rem;
  }
  .swiper-button-prev.swiper-button-disabled {
    margin-bottom: 4rem;
  }
  .hero__graphic--wrapper {
    margin-bottom: 2rem;
  }
}
/*# sourceMappingURL=data:application/json,%7B%22version%22%3A3%2C%22sources%22%3A%5B%22%2Fthemes%2Fheimattage%2Fscss%2Felements%2F_hero.scss%22%2C%22%2Fthemes%2Fheimattage%2Fscss%2Felements%2F..%2Fsettings%2Fbreakpoints.scss%22%5D%2C%22names%22%3A%5B%5D%2C%22mappings%22%3A%22AAAA%3BAAEA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAKE%3BAAAA%3BAAAA%3BAAGE%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAKE%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BACyBF%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BADhBI%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BACgBJ%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BADJE%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAOF%3BAAAA%3BAAAA%3BAAKE%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAcN%3BAAEI%3BAAAA%3BAAAA%3BAAGA%3BAAAA%3BAAAA%3BAAIE%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAOE%3BAAAA%3BAAAA%3BAAAA%3BAAKC%3BAAAA%3BAAAA%3BAAGC%3BAAAA%3BAAAA%3BAAAA%3BAAKA%3BAAAA%3BAAAA%3BAAOF%3BAAAA%3BAAAA%3BAAAA%3BAAOJ%3BAAAA%3BAAAA%3BAAKF%3BAAAA%3BAAAA%3BAAGA%3BAAAA%3BAAAA%3BAAAA%22%7D */