SCSS Breakpoint Mixin with Map

@use 'sass:map';

/* Store all breakpoints in one map — edit here, updates everywhere */
$breakpoints: (
  'sm': 640px,
  'md': 768px,
  'lg': 1024px,
  'xl': 1280px,
);

/* Wraps @media in a mixin so you never write a raw query again */
@mixin bp($size) {
  @media (min-width: map.get($breakpoints, $size)) {
    @content;
  }
}

/* Pass a key from the map, write your styles inside the block */
.grid {
  grid-template-columns: 1fr;

  @include bp('md') { grid-template-columns: repeat(2, 1fr); }
  @include bp('lg') { grid-template-columns: repeat(3, 1fr); }
}