// Sample Less stylesheet — samplefiles.com
@ink: #191919;
@accent: #a24c2a;
@radius: 8px;

.card-base(@pad: 16px) {
  padding: @pad;
  border: 1px solid fade(@ink, 15%);
  border-radius: @radius;
}

.customer-card {
  .card-base(20px);
  color: @ink;

  &__name {
    font-weight: 600;
  }

  &--vip {
    border-color: @accent;

    .badge {
      color: darken(@accent, 10%);
      background: lighten(@accent, 45%);
    }
  }

  @media (max-width: 600px) {
    padding: 12px;
  }
}