.StudyCard {
  $self: &;

  display: flex;
  flex-direction: column;
  align-content: stretch;
  background-color: var(--color--white);
  border-radius: var(--radius--extra-large);
  border: 1px solid var(--color--gray-200);
  transition-property: border-color, background-color;
  transition-duration: var(--timing--hover);
  cursor: pointer;
  overflow: hidden;

  &:hover,
  &:focus-visible {
    border-color: var(--color--gray-300);
    background-color: var(--color--gray-25);
    box-shadow: var(--shadow--s);
  }

  &:hover,
  &:focus-visible {
    #{$self}__ActionsMenu {
      opacity: 1;
    }

    // Workaround to change the Chip color on hover of the parent card
    // This is temporary until design finalizes the chip designs, which may enable them to be internal to the StudyCard
    #{$self}__TypeChipWrapper .Chip {
      background-color: var(--color--gray-25);
    }
  }

  &__ActionsMenu {
    opacity: 0;
    transition-property: opacity, background-color, color;
    transition-duration: var(--timing--hover);

    &:focus-visible,
    &--toggled {
      opacity: 1;
    }
  }

  &__Billboard {
    aspect-ratio: 2 / 1;
    width: 100%;
    height: auto;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 1em;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 0;
    flex: none;
  }

  &__Content {
    padding: 1.5em 1em 1em;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    row-gap: 0.25em;
    position: relative;
    flex: 1 1 100%;
  }

  &__TypeChipWrapper {
    position: absolute;
    left: 1em;
    top: 0;
    transform: translateY(-50%);
  }

  &__Title {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;

    &--with-subtitle {
      -webkit-line-clamp: 2;
    }
  }

  &__Subtitle {
    font-size: var(--font-size--s);
    font-style: italic;
    color: var(--color--gray-500);
  }

  &__Footer {
    margin-top: auto;
    padding-top: 0.25em;
  }
}