/* =============================================================================
   Image teaser
   ========================================================================== */

.imageteaser {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 400px;
  overflow: hidden;
  background: rgb(var(--c-primary-dark));
}

.imageteaser::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(28, 36, 80, 0.62);
  pointer-events: none;
}

.imageteaser__media {
  position: absolute;
  inset: 0;
  will-change: transform;
}

.imageteaser.-parallax .imageteaser__media {
  inset: -14% 0;
}

.imageteaser__media picture,
.imageteaser__image {
  display: block;
  width: 100%;
  height: 100%;
}

.imageteaser__image {
  max-width: none;
  object-fit: cover;
}

.imageteaser__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
  padding: var(--p) 4%;
}

.imageteaser .imageteaser__headline {
  max-width: 900px;
  margin: 0;
  color: rgb(var(--c-neutral-lightest));
  font-size: clamp(1.9rem, 4vw, 3.6rem);
  font-weight: var(--f-weight-eb);
  line-height: 1.02;
  text-transform: uppercase;
  text-wrap: balance;
}

.imageteaser__text p {
  max-width: 620px;
  margin: 0 0 1rem;
  color: rgb(var(--c-neutral-lightest));
  font-size: var(--f-size-l-1);
}

.imageteaser__text p:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin: 0;
}

.imageteaser__text p:last-child:not(:has(a)) {
  display: block;
}

.imageteaser__text .font__button {
  font-size: 1rem;
}

/* =============================================================================
   Media Queries
   ========================================================================== */

@media (min-width: 800px) {
  .imageteaser {
    min-height: 620px;
  }

  .imageteaser::after {
    background: linear-gradient(90deg, rgba(28, 36, 80, 0.86) 0%, rgba(28, 36, 80, 0.55) 55%, rgba(28, 36, 80, 0.1) 100%);
  }
}

@media (min-width: 1280px) {
  .imageteaser__content {
    padding-left: 6%;
    padding-right: 6%;
  }
}

@media (min-width: 1580px) {
  .imageteaser__content {
    padding-left: calc((100% - 1440px) / 2);
    padding-right: calc((100% - 1440px) / 2);
  }
}