/* Supplied Allergien hero artwork and requested desktop height. */
@media (min-width: 1051px) {
  .allergy-page .allergy-hero {
    box-sizing: border-box;
    width: 100%;
    height: clamp(1200px, 86vw, 1440px) !important;
    min-height: 1200px !important;
    max-height: 1440px !important;
    aspect-ratio: auto !important;
    background-color: #faf6ee !important;
    background-image: url("../img/allergien-hero-background-v29.webp") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
  }

  .allergy-page .allergy-hero .hero-copy {
    top: 14% !important;
  }
}

.allergy-page .allergy-hero__artwork {
  display: none !important;
}

/* Exact supplied transparent illustrations in the requested card order. */
.allergy-page .symptom-grid .symptom-card .symptom-icon-wrap {
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

.allergy-page .symptom-grid .symptom-card .symptom-icon-wrap svg {
  display: none !important;
}

/* DOM order: Niesen, Laufende Nase, Juckende Augen,
   Husten & Atemnot, Engegefühl in der Brust. */
.allergy-page .symptom-grid .symptom-card:nth-child(1) .symptom-icon-wrap {
  background-image: url("../img/allergy-symptoms-v29/niesen.webp") !important;
}

.allergy-page .symptom-grid .symptom-card:nth-child(2) .symptom-icon-wrap {
  background-image: url("../img/allergy-symptoms-v29/laufende-nase.webp") !important;
}

.allergy-page .symptom-grid .symptom-card:nth-child(3) .symptom-icon-wrap {
  background-image: url("../img/allergy-symptoms-v29/juckende-augen.webp") !important;
}

.allergy-page .symptom-grid .symptom-card:nth-child(4) .symptom-icon-wrap {
  background-image: url("../img/allergy-symptoms-v29/husten-atemnot.webp") !important;
}

.allergy-page .symptom-grid .symptom-card:nth-child(5) .symptom-icon-wrap {
  background-image: url("../img/allergy-symptoms-v29/engegefuehl-brust.webp") !important;
}

@media (max-width: 1050px) {
  .allergy-page .allergy-hero {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    background-image: url("../img/allergien-hero-background-v29.webp") !important;
    background-repeat: no-repeat !important;
    background-position: 70% center !important;
    background-size: cover !important;
  }
}

@media (max-width: 620px) {
  .allergy-page .allergy-hero {
    background-position: 72% center !important;
  }
}