.card {
  background-color: var(--bg-page);
  display: flex;
  flex-direction: column;

  &.border {
    border: 1px solid var(--border-subtle);
  }

  &.large {
    border-radius: 40px;
    padding: var(--fx-p-64);
  }

  &.medium {
    border-radius: 32px;
    padding: var(--fx-p-40);
  }

  &.small {
    border-radius: 24px;
    padding: var(--fx-p-32);
  }

  @media (width < 500px) {
    &.large,
    &.medium,
    &.small {
      border-radius: 24px;
      padding: var(--fx-p-24);
    }
  }
}