How do you implement responsive design patterns — mobile-first, container queries, and fluid typography?

Mobile-First Approach

/* Base: Mobile styles */
.card {
  display: flex;
  flex-direction: column;
  padding: 16px;
}

/* Tablet+ */
@media (min-width: 768px) {
  .card {
    flex-direction: row;
    padding: 24px;
  }
}

/* Desktop+ */
@media (min-width: 1024px) {
  .card {
    padding: 32px;
    max-width: 1200px;
  }
}

Container Queries (Modern CSS)

/* Define containment context */
.sidebar {
  container-type: inline-size;
  container-name: sidebar;
}

/* Respond to CONTAINER size, not viewport */
@container sidebar (min-width: 400px) {
  .card {
    flex-direction: row; /* Horizontal when sidebar is wide */
  }
}

@container sidebar (max-width: 399px) {
  .card {
    flex-direction: column; /* Vertical when sidebar is narrow */
  }
}

Fluid Typography (clamp)

/* Old: fixed breakpoints */
h1 { font-size: 24px; }
@media (min-width: 768px) { h1 { font-size: 48px; } }

/* New: fluid — scales smoothly between breakpoints */
h1 {
  font-size: clamp(1.5rem, 1rem + 2.5vw, 3rem);
  /* min: 1.5rem, preferred: 1rem + 2.5vw, max: 3rem */
}

/* Fluid spacing */
.section {
  padding: clamp(1rem, 0.5rem + 2vw, 3rem);
}

Responsive Patterns Summary

Pattern	Use Case
Mobile-first media queries	Page layout
Container queries	Component-level responsiveness
clamp()	Fluid typography, spacing
min()/max()	Constraining values
aspect-ratio	Maintaining proportions
dvh (dynamic vh)	Mobile browser address bar