[data-component-id="kackaamin:program_card"] {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
  border-radius: 104px 0;

  & img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    background: var(--program-color);
  }

  & .program-card__content {
    flex: 1 0 auto;
    background: var(--text-primary);
    color: var(--text-alternative);
    padding: 16px 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
  }

  & .program-card__header {
    display: flex;
    gap: 16px;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-wrap: balance;
  }

  & .program-card__header,
  & .program-card__details,
  & .program-card__actions {
    padding: 0 16px;
  }

  & .program-card__title {
    color: var(--program-color);
  }

  & .program-card__details {
    display: flex;
    font-size: 12px;
    font-weight: 500;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    gap: 16px;

    @media (min-width: 1024px) {
      flex-direction: row;
    }
  }

  & .program-card__detail {
    display: inline-flex;
    gap: 2px;

    & svg {
      width: 16px;
      height: 16px;
      color: var(--program-color);
    }
  }

  & .program-card__actions {
    display: flex;
    gap: 16px;
    margin-top: 12px;
    padding-top: 12px;
    justify-content: center;
    border-top: 0.5px solid var(--program-color);
  }

  & .program-card__action-apply {
    background-color: var(--program-color);
    color: var(--text-primary);

    &:hover {
      background-color: color-mix(in oklab, var(--program-color), var(--text-primary) 20%);
    }
  }

  & .program-card__action-visit {
    color: var(--program-color);

    &:hover {
      background-color: color-mix(in oklab, var(--program-color) 20%, transparent);
    }
  }
}