Profile Teaser

<div class="profile__teaser">
  <div class="image-wrapper">
    <a href="/analysts/christopher-grimes"><img src="https://images.ctfassets.net/03fbs7oah13w/1tafCx974n5lkTIM87ZunB/24ad22072ba60224310eb1d8ec4eac94/Christopher-Grimes-resized.jpg" alt="Christopher Grimes" /></a>
  </div>

  <p>
    <a href="/analysts/christopher-grimes"><strong>Christopher Grimes</strong><br />
    Insurance Ratings<br />
    Senior Director<br />
    +1 312 368 3263
    <span style="position: relative; top: -1px; padding: 0px 6px">|</span></a>
    <a href="mailto:christopher.grimes@fitchratings.com"><i class="far fa-envelope"></i></a>
  </p>
</div>

  // PROFILE BANNER
  --profile-banner-background: #eff0f1;

.profile__banner {
  position: relative;
  min-height: 30rem;
  margin: 6.6rem 0 3rem;
  padding: 7rem 7rem 0;
  background-color: var(--profile-banner-background);
}
.profile__banner.bg--img {
  margin-top: 0;
}
.profile__image {
  margin-top: -13.6rem;
  float: right;
}
.profile__image img {
  width: 100%;
  height: auto;
  display: block;
}
.profile__teaser .image-wrapper {
  aspect-ratio: 1/1;
}
.profile__teaser .image-wrapper img {
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.profile__teaser a {
  color: inherit;
}
.profile__teaser a:hover, .profile__teaser a:focus {
  text-decoration: none;
}

/* iPad Pro Portrait - iPad Landscape */
@media only screen and (max-width: 1024px) {
  .profile__image {
    margin-top: -9rem;
  }
}
/* iPad Portrait  */
@media only screen and (max-width: 768px) {
  .profile__banner {
    min-height: 27.8rem;
    padding: 4.8rem 3.6rem 0;
  }
  .profile__image {
    margin-top: -1.8rem;
  }
}
/* iPhone 6 onwards */
@media only screen and (max-width: 480px) {
  .profile__banner {
    margin-top: 0;
    padding: 4.8rem 2.4rem 0;
  }
  .profile__image {
    margin-top: 4.8rem;
  }
}

@import '../abstracts/_mixins';

.profile {
  &__banner {
    position: relative;
    min-height: 30rem;
    margin: 6.6rem 0 3rem;
    padding: 7rem 7rem 0;
    background-color: var(--profile-banner-background);

    &.bg--img {
      margin-top: 0;
    }
  }

  &__image {
    margin-top: -13.6rem;
    float: right;

    img {
      width: 100%;
      height: auto;
      display: block;
    }
  }
  &__teaser {
    .image-wrapper {
      aspect-ratio: 1/1;
      
      img {
        object-fit: cover;
        width: 100%;
        height: 100%;
      }

    }
    a {
      color: inherit;

      &:hover,
      &:focus {
        text-decoration: none;
      }
    }
  }
}

@include mq-2 {
  .profile {
    &__image {
      margin-top: -9rem;
    }
  }
}
@include mq-3 {
  .profile {
    &__banner {
      min-height: 27.8rem;
      padding: 4.8rem 3.6rem 0;
    }

    &__image {
      margin-top: -1.8rem;
    }
  }
}
@include mq-4 {
  .profile {
    &__banner {
      margin-top: 0;
      padding: 4.8rem 2.4rem 0;
    }
    &__image {
      margin-top: 4.8rem;
    }
  }
}