.card {
  border-radius: $border-radius-xl;
  border: 1px solid var(--color-gray-200);
  box-shadow: $box-shadow-medium;
  padding: calc-rem(24px 32px);

  @include  m(inset) {
    @extend .card;

    border-radius: $border-radius-xl;
    border-color: var(--color-gray-100);
    box-shadow: none;
    background-color: var(--color-gray-50);
    padding: calc-rem(16px);
  }

  @include e(header) {
    padding: calc-rem(0 0 12px 0);
  }

  @include e(title) {
    @include fontSize($font-size-base);

    line-height: 1.5;
    padding-bottom: calc-rem(4px);
    margin: 0;
    color: var(--color-brand-dark);
    font-weight: $font-weight-semibold;


    @include m(divider) {
      margin-top: 0;
    }
  }

  @include e(subtitle) {
    @include fontSize($font-size-sm);

    color: var(--color-gray-500);
    line-height: 1.5;
  }

  @include e(content) {
    padding: calc-rem(20px 0 0 0);
  }
}