.illustration {
  width: 100%;
  max-height: 350px;
  max-width: 350px;

  @media (min-width: $breakpoint_lg) {
    max-height: 550px;
    max-width: 550px;
  }
}

.bg-illustration {
  min-height: 250px;
  z-index: 1;
  width: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  @media (min-width: $breakpoint_lg) {
    min-height: 450px;
  }

  &.header-illustration {
    max-height: 550px;
    z-index: 1;
    margin: 0;

    @media (min-width: $breakpoint_lg) {
      max-width: 550px;
      max-height: 550px;
      top: 0;
    }
  }

  &.illustration_00 {
    background-image: url('/static/svg/illustrations/00-Rucksack.svg');
  }

  &.illustration_01 {
    background-image: url('/static/svg/illustrations/01-Rucksack-Blau.svg');
  }

  &.illustration_02 {
    background-image: url('/static/svg/illustrations/02-Sprechblasenumarmung.svg');
  }

  &.illustration_03 {
    background-image: url('/static/svg/illustrations/03-Umarmung-am-Boden.svg');
  }

  &.illustration_04 {
    background-image: url('/static/svg/illustrations/04-Mann-auf-Sprechblase-sitzend.svg');
  }

  &.illustration_05 {
    background-image: url('/static/svg/illustrations/05-Jugendlicher-auf-Hand.svg');
  }

  &.illustration_06 {
    background-image: url('/static/svg/illustrations/06-Schirmmotiv.svg');
  }

  &.illustration_07 {
    background-image: url('/static/svg/illustrations/07-Zwei-Personen-auf-der-Bank.svg');
  }

  &.illustration_08 {
    background-image: url('/static/svg/illustrations/08-Frau-mit-Sprechblasen-in-der-Hand.svg');
  }

  &.illustration_09 {
    background-image: url('/static/svg/illustrations/09-Community-Endlichhelfenkoennen.svg');
  }

  &.illustration_10 {
    background-image: url('/static/svg/illustrations/10-Haende-Formen-Herz.svg');
  }

  &.illustration_11 {
    background-image: url('/static/svg/illustrations/11-Frau-mit-Brief.svg');
  }

  &.illustration_12 {
    background-image: url('/static/svg/illustrations/12-Kurssituation.svg');
  }

  &.illustration_13 {
    background-image: url('/static/svg/illustrations/13-Instruktorin.svg');
  }

  &.illustration_14 {
    background-image: url('/static/svg/illustrations/14-Unternehmen.svg');
  }

  &.illustration_15 {
    background-image: url('/static/svg/illustrations/15-Forschung.svg');
  }

  &.illustration_16 {
    background-image: url('/static/svg/illustrations/16-Office.svg');
  }

  &.illustration_17 {
    background-image: url('/static/svg/illustrations/17-Instruktoren-Trainings.svg');
  }

  &.illustration_18 {
    background-image: url('/static/svg/illustrations/18-Instruktoren-Trainings-Blau.svg');
  }

  &.illustration_19 {
    background-image: url('/static/svg/illustrations/19-Karte.svg');
  }
}