<!-- Simple three-tier breakpoints -->

/* Mobile: 0px - 767px */
.container {
  width: 100%;
  padding: 15px;
}

/* Tablet: 768px - 1023px */
@media (min-width: 768px) {
  .container {
    width: 750px;
    margin: 0 auto;
    padding: 20px;
  }
}

/* Desktop: 1024px+ */
@media (min-width: 1024px) {
  .container {
    width: 1000px;
    margin: 0 auto;
    padding: 30px;
  }
}

<!-- Three clear tiers -->

/* Tailwind-style breakpoints */

/* sm: 640px */
@media (min-width: 640px) { /* small */ }

/* md: 768px */
@media (min-width: 768px) { /* medium */ }

/* lg: 1024px */
@media (min-width: 1024px) { /* large */ }

/* xl: 1280px */
@media (min-width: 1280px) { /* extra large --> }

/* 2xl: 1536px */
@media (min-width: 1536px) { /* 2x large --> }

/* Bootstrap-style breakpoints */

/* xs: 0px (no breakpoint, default) */
/* sm: 576px */
/* md: 768px */
/* lg: 992px */
/* xl: 1200px */
/* xxl: 1400px -->

<!-- Better: add breakpoints where content breaks -->

/* Start with mobile */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

/* Add breakpoint when layout becomes too cramped */
@media (min-width: 600px) {
  /* Content needs more space at 600px */
  .grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Another breakpoint when there's room for more columns */
@media (min-width: 900px) {
  .grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

<!-- Breakpoints based on actual content needs -->

/* Example: navigation becomes horizontal at 768px */
.nav {
  display: none;  /* hidden on mobile -->
}

.hamburger {
  display: block;
}

@media (min-width: 768px) {
  /* Nav fits on one line at 768px */
  .nav {
    display: flex;
    gap: 20px;
  }

  .hamburger {
    display: none;
  }
}

<!-- Breakpoint chosen where nav fits -->

/* Font size breakpoints based on readability -->
.title {
  font-size: 20px;  /* mobile -->
}

@media (min-width: 768px) {
  .title {
    font-size: 28px;  /* tablet -->
  }
}

@media (min-width: 1024px) {
  .title {
    font-size: 36px;  /* desktop -->
  }
}

<!-- Font scales for readability at different sizes -->

<!-- Browser DevTools: use responsive design mode -->

/* Chrome/Firefox: Ctrl+Shift+M (Cmd+Shift+M on Mac) -->
/* Shows viewport width, test at breakpoints -->

/* Test common device widths: -->
/* iPhone: 375px -->
/* iPad: 768px -->
/* Desktop: 1024px+ -->

/* Or test at your breakpoints: -->
/* 640px, 768px, 1024px, 1280px -->

/* Visual debugging: show breakpoints -->
@media (max-width: 639px) {
  body::before {
    content: 'Mobile < 640px';
    position: fixed;
    top: 0;
    background: red;
    color: white;
    padding: 5px;
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  body::before {
    content: 'Tablet 640-1024px';
    background: blue;
  }
}

@media (min-width: 1024px) {
  body::before {
    content: 'Desktop 1024px+';
    background: green;
  }
}

<!-- Current breakpoint shown while developing -->

<!-- Option 1: Breakpoints at bottom (separation) -->
.container { /* mobile styles */ }
.item { /* mobile styles */ }

@media (min-width: 768px) {
  .container { /* tablet styles */ }
  .item { /* tablet styles */ }
}

@media (min-width: 1024px) {
  .container { /* desktop styles */ }
  .item { /* desktop styles */ }
}

<!-- Clustered by breakpoint -->

/* Option 2: Mobile-first nesting (SCSS style) -->
.container {
  /* mobile */
  width: 100%;

  @media (min-width: 768px) {
    /* tablet */
    width: 750px;
  }

  @media (min-width: 1024px) {
    /* desktop */
    width: 1000px;
  }
}

<!-- Not valid plain CSS, but clear for SCSS -->

/* Option 3: CSS variables for breakpoint reuse -->
:root {
  --bp-mobile: 0;
  --bp-tablet: 768px;
  --bp-desktop: 1024px;
}

@media (min-width: var(--bp-tablet)) {
  /* reusable breakpoint variable */
}

<!-- Centralized breakpoint management -->

/* Recommended: cluster by breakpoint (Option 1) -->
/* Easy to find all changes for a breakpoint -->
/* Clear mobile-first progression */