/**
 * Media queries can't use custom CSS properties, so we use a Sass variable
 * instead to define/apply our breakpoints.
 */
/**
 * From https://github.com/twbs/bootstrap/blob/main/scss/mixins/_breakpoints.scss
 */
sharpen-profile-card sharpen-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  place-content: space-between;
  gap: 20px;
  height: 100%;
}
sharpen-profile-card .name {
  font-size: var(--font-size-lg);
  text-align: center;
  flex: 1;
}
sharpen-profile-card .initial {
  display: flex;
  align-items: center;
  place-content: center;
  font-family: var(--font-family-serif);
  font-size: var(--font-size-3xl);
  margin: 0 auto;
  width: 100px;
  height: 100px;
  border-radius: 100%;
  background-color: #0f3e88;
  color: var(--color-sky);
}