// Sample SCSS — samplefiles.com
@use 'sass:math';

$accent: #b0532e;
$radius: 12px;
$breakpoints: (sm: 640px, md: 960px, lg: 1280px);

@mixin respond($size) {
  @media (min-width: map-get($breakpoints, $size)) {
    @content;
  }
}

.card {
  padding: math.div(24px, 2);
  border-radius: $radius;
  border: 1px solid rgba($accent, 0.3);

  &__title {
    font-weight: 600;
    color: darken($accent, 10%);
  }

  &:hover {
    border-color: $accent;
  }

  @include respond(md) {
    padding: 24px;
  }
}