@import "../../helpers";

.sf-category-card {
  box-sizing: border-box;
  position: relative;
  display: block;
  width: 12.375rem;
  height: 9.0625rem;
  &__details {
    box-sizing: border-box;
    position: absolute;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    width: 100%;
    background: var(--c-primary);
    padding: var(--spacer-xs);
  }
  &__label, &__count {
    font-size: var(--font-size--base);
    font-weight: var(--font-weight--medium);
    color: var(--c-white);
  }
  @include for-desktop {
    width: 18.4375rem;
    height: 13.875rem;
    &__details {
      padding: var(--spacer-sm) var(--spacer-xs);
    }
    &__label, &__count {
      font-weight: var(--font-weight--normal);
    }
  }
}