:root {
  --image-hover-card-transition: 0.4s ease;
}

.image-hover-card {
  --_color: var(--color, var(--clr-primary));
  --_overlay-color: var(--overlay-color, var(--_color));
  --_content-color: var(--content-color, var(--_color));
  position: relative;
  overflow: hidden;
  height: 100%;
}
.image-hover-card * {
  color: var(--_content-color);
}
.image-hover-card__image-container {
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.image-hover-card__image-container img, .image-hover-card__image-container picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--image-hover-card-transition);
}
.image-hover-card__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--image-hover-card-transition), transform var(--image-hover-card-transition);
  background-color: var(--_overlay-color);
}
.image-hover-card__overlay.light-text .image-hover-card__headline,
.image-hover-card__overlay.light-text .image-hover-card__subheadline,
.image-hover-card__overlay.light-text .image-hover-card__text {
  color: #333;
}
.image-hover-card__content {
  padding: 2rem;
  max-width: 90%;
  text-align: center;
  color: var(--_content-color);
  transition: opacity var(--image-hover-card-transition), transform var(--image-hover-card-transition);
  opacity: 0;
}
.image-hover-card__headline {
  margin: 0 0 0.5rem;
  font-size: 1.75rem;
  font-weight: bold;
  color: var(--_content-color);
  transition: opacity var(--image-hover-card-transition), transform var(--image-hover-card-transition);
}
.image-hover-card__headline--visible {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1rem;
  margin: 0;
  z-index: 2;
  text-align: center;
  opacity: 1;
}
.image-hover-card__subheadline {
  margin: 0 0 1rem;
  font-size: 1.25rem;
  font-weight: normal;
  opacity: 0;
  transition: opacity var(--image-hover-card-transition), transform var(--image-hover-card-transition);
}
.image-hover-card__text {
  margin-bottom: 1.5rem;
  opacity: 0;
  transition: opacity var(--image-hover-card-transition), transform var(--image-hover-card-transition);
  transition-delay: 0.1s;
}
.image-hover-card__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-top: 1.5rem;
  opacity: 0;
  transition: opacity var(--image-hover-card-transition), transform var(--image-hover-card-transition);
  transition-delay: 0.2s;
}
.image-hover-card__buttons .btn {
  margin: 0;
}
.image-hover-card[data-text-position-v=top] .image-hover-card__content {
  align-self: flex-start;
}
.image-hover-card[data-text-position-v=center] .image-hover-card__content {
  align-self: center;
}
.image-hover-card[data-text-position-v=bottom] .image-hover-card__content {
  align-self: flex-end;
}
.image-hover-card[data-text-position-h=left] .image-hover-card__overlay {
  justify-content: flex-start;
}
.image-hover-card[data-text-position-h=center] .image-hover-card__overlay {
  justify-content: center;
}
.image-hover-card[data-text-position-h=right] .image-hover-card__overlay {
  justify-content: flex-end;
}
.image-hover-card[data-animation=fade] .image-hover-card__overlay {
  opacity: 0;
}
.image-hover-card[data-animation=slide_up] .image-hover-card__overlay {
  transform: translateY(100%);
}
.image-hover-card[data-animation=slide_down] .image-hover-card__overlay {
  transform: translateY(-100%);
}
.image-hover-card[data-animation=slide_left] .image-hover-card__overlay {
  transform: translateX(100%);
}
.image-hover-card[data-animation=slide_right] .image-hover-card__overlay {
  transform: translateX(-100%);
}
.image-hover-card[data-animation=zoom] .image-hover-card__content {
  transform: scale(0.8);
}
.image-hover-card:hover .image-hover-card__image-container img, .image-hover-card:hover .image-hover-card__image-container picture {
  transform: scale(1.05);
}
.image-hover-card:hover .image-hover-card__overlay {
  opacity: 1;
  transform: translateY(0) translateX(0);
}
.image-hover-card:hover .image-hover-card__content {
  opacity: 1;
  transform: scale(1);
}
.image-hover-card:hover .image-hover-card__headline:not(.image-hover-card__headline--visible),
.image-hover-card:hover .image-hover-card__subheadline,
.image-hover-card:hover .image-hover-card__text,
.image-hover-card:hover .image-hover-card__buttons {
  opacity: 1;
  transform: translateY(0);
}

@media (pointer: coarse) {
  .image-hover-card .image-hover-card__overlay {
    opacity: 1;
    transform: none;
  }
  .image-hover-card .image-hover-card__content,
  .image-hover-card .image-hover-card__headline,
  .image-hover-card .image-hover-card__subheadline,
  .image-hover-card .image-hover-card__text,
  .image-hover-card .image-hover-card__buttons {
    opacity: 1;
    transform: none;
  }
}

/*# sourceMappingURL=data:application/json;charset=utf-8,%7B%22version%22%3A3%2C%22sourceRoot%22%3A%22%22%2C%22sources%22%3A%5B%22file%3A%5C%2F%5C%2F%5C%2Fvar%5C%2Fwww%5C%2Fhtml%5C%2Fraedlein%5C%2Fpublic%5C%2Fbundles%5C%2Fcontaoone4you%5C%2Fcustom-elements%5C%2Fimage_hover_card.scss%22%5D%2C%22names%22%3A%5B%5D%2C%22mappings%22%3A%22AAGA%3BEACE%3B%3B%3BAAGF%3BEACE%3BEACA%3BEACA%3BEAEA%3BEACA%3BEACA%3B%3BAAEA%3BEACE%3B%3BAAIF%3BEACE%3BEACA%3BEACA%3B%3BAAEA%3BEACE%3BEACA%3BEACA%3BEACA%3B%3BAAKJ%3BEACE%3BEACA%3BEACA%3BEACA%3BEACA%3BEACA%3BEACA%3BEAGA%3B%3BAAIE%3BAAAA%3BAAAA%3BEAGE%3B%3BAAMN%3BEACE%3BEACA%3BEACA%3BEACA%3BEACA%3BEACA%3B%3BAAIF%3BEACE%3BEACA%3BEACA%3BEACA%3BEACA%3B%3BAAEA%3BEACE%3BEACA%3BEACA%3BEACA%3BEACA%3BEACA%3BEACA%3BEACA%3BEACA%3B%3BAAIJ%3BEACE%3BEACA%3BEACA%3BEACA%3BEACA%3B%3BAAGF%3BEACE%3BEACA%3BEACA%3BEACA%3B%3BAAIF%3BEACE%3BEACA%3BEACA%3BEACA%3BEACA%3BEACA%3BEACA%3BEACA%3B%3BAAEA%3BEACE%3B%3BAAMJ%3BEACE%3B%3BAAGF%3BEACE%3B%3BAAGF%3BEACE%3B%3BAAGF%3BEACE%3B%3BAAGF%3BEACE%3B%3BAAGF%3BEACE%3B%3BAAKA%3BEACE%3B%3BAAKF%3BEACE%3B%3BAAKF%3BEACE%3B%3BAAKF%3BEACE%3B%3BAAKF%3BEACE%3B%3BAAKF%3BEACE%3B%3BAAOA%3BEACE%3B%3BAAIJ%3BEACE%3BEACA%3B%3BAAGF%3BEACE%3BEACA%3B%3BAAGF%3BAAAA%3BAAAA%3BAAAA%3BEAIE%3BEACA%3B%3B%3BAAMN%3BEAEI%3BIACE%3BIACA%3B%3BEAGF%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BIAKE%3BIACA%22%7D */