.profile-teaser {
  margin: $grid-gutter 0;

  .profile--picture {
    @include profile-circle;
    background-color: $color-bg-slight-contrast;
    display: inline-block;

    @include icon(user, fas, before);

    &:before {
      position: absolute;
      top: 25%;
      left: 0;
      width: 100%;
      font-size: 3.5rem;
      color: $color-text-inverted;
    }

    img {
      width: 100%;
      height: auto;
      position: relative;
      background: $color-bg-light;
    }
  }

  &.node--type-location {
    .profile--picture {
      @include icon(location-dot, fas, before);
    }
  }

  .field--name-field-subtitle {
    font-weight: normal;
    margin: 0;
  }
}

.profile-teaser.view-mode-embedded-teaser,
.profile-teaser.view-mode-contact {
  text-align: center;
  margin: 0;

  //.profile--content {
  //  h4,
  //  h3 {
  //    margin: 0;
  //  }

    //.field--name-field-subtitle,
    //.field--name-field-contact-data {
    //}
  //}
}


.profile-teaser.view-mode-teaser,
.profile-teaser.view-mode-compact {
  //text-align: left;
  //@include grid(auto 1fr);
  @extend %flex !optional;
  align-items: center;
  //width: fit-content;
  //margin: 0 auto;

  .profile--picture, .profile--spacing {
    text-align: center;
    width: 4rem;
    height: 4rem;
    min-width: 4rem;

    @include breakpoint(m) {
      width: 7rem;
      height: 7rem;
      min-width: 7rem;
    }

    &:before {
      font-size: 2rem;

      @include breakpoint(m) {
        font-size: 4rem;
      }
    }
  }

  .profile--content {
    h4,
    h3 {
      margin: 0 0 .25rem 0;
    }

    .field:first-child {
      margin-top: 0;
    }
    .field:last-child {
      margin-bottom: 0;
    }
  }
}

.profile-teaser.view-mode-compact,
.leaflet-popup-content .profile-teaser {

  gap: $grid-gutter;

  .profile--picture, .profile--spacing {
    width: 4rem;
    height: 4rem;
    min-width: 4rem;

    @include breakpoint(m) {
      width: 4rem;
      height: 4rem;
      min-width: 4rem;
    }

    &:before {
      //top: 1rem;
      font-size: 2rem;

      @include breakpoint(m) {
        //top: .5rem;
        font-size: 2rem;
      }
    }
  }
}

.profile-teaser.view-mode-legal {
  text-align: left;
  flex-flow: column;
  //@include grid(auto 1fr);
  @extend %flex !optional;
  align-items: left;
  //width: fit-content;
  //margin: 0 auto;

  .profile-basics {
    @extend %flex !optional;
    align-items: left;
  }

  .profile--picture, .profile--spacing {
    text-align: center;
    width: 4rem;
    height: 4rem;
    min-width: 4rem;

    //@include breakpoint(m) {
    //  width: 7rem;
    //  height: 7rem;
    //  min-width: 7rem;
    //}

    &:before {
      font-size: 2rem;

      //@include breakpoint(m) {
      //  font-size: 4rem;
      //}
    }
  }

  //.contact-data .contact-info {
  //  column-count: 2;
  //}

  //.profile--content {
  //  h4,
  //  h3 {
  //    margin: 0 0 .25rem 0;
  //  }
  //
  //  .field:first-child {
  //    margin-top: 0;
  //  }
  //  .field:last-child {
  //    margin-bottom: 0;
  //  }
  //}
}

.node--type-article.view-mode-teaser .teaser--author .field--name-field-subtitle {
  display: none;
}

div[class*="grid"] .profile-teaser.view-mode-teaser {
  @include breakpoint(m) {
    flex-flow: column;
    text-align: center;
  }
}
