Variables

$brand-color: #1976d2;
$spacing: 8px;
$radius: 4px;
$breakpoints: (
  small: 576px,
  medium: 768px,
  large: 992px
);

.button {
  background: $brand-color;
  padding: $spacing * 2;
  border-radius: $radius;
}

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

.grid {
  @include respond-to(medium) {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}