@import "tailwindcss/theme";
@import "../variables/theme.css";
@import "../variables/root.css";

.peopleMemberCard {
  @apply flex items-start md:block;

  background: linear-gradient(
    183deg,
    var(--color-blue-300) -26.51%,
    var(--color-blue-600) 56.32%
  );

  @variant md {
    background: linear-gradient(
      198deg,
      var(--color-blue-300) 24.29%,
      var(--color-blue-600) 75.71%
    );
  }
}

.peopleMemberCard-portrait {
  @apply relative;

  aspect-ratio: 120/160;
  flex: 0 0 120px;
  padding-bottom: var(--spacing-12);

  clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    36.32% 100%,
    23.07% 76.28%,
    0 76.28%
  );

  @variant md {
    padding-bottom: var(--spacing-lg-2xs);
  }
}

.peopleMemberCard-information {
  @apply text-white;

  font: var(--t4-medium);
  padding: var(--spacing-sm-2xs) var(--spacing-sm-2xs) var(--spacing-sm-2xs)
    var(--spacing-12);

  @variant md {
    padding: 0 var(--spacing-lg-2xs) var(--spacing-lg-2xs);
  }

  > * + * {
    margin-top: var(--spacing-12);

    @variant md {
      margin-top: var(--spacing-lg-2xs);
    }
  }
}

.peopleMemberCard-name {
  font: var(--t3-bold);

  @variant md {
    font: var(--h4-serif);
    font-size: var(--text-heading-lg-sm);
  }
}

.peopleMemberCard-title {
  @apply opacity-60;
}

.peopleMemberCard-career {
  list-style: disc;
  padding-left: 1.23em;
}