Use container queries for component-level responsiveness

/* 1. Define the container on the PARENT */
.card-container {
  container-type: inline-size;
  /* Optionally name it */
  container-name: card;
  /* Shorthand */
  container: card / inline-size;
}
 
/* 2. Query the container from the CHILD */
@container (min-width: 400px) {
  .card {
    display: flex;
    gap: 1.5rem;
  }
 
  .card__image {
    flex: 0 0 200px;
  }
}

/* Name containers to target specific ancestors */
.sidebar {
  container: sidebar / inline-size;
}
 
.main-content {
  container: main / inline-size;
}
 
/* Target the sidebar container specifically */
@container sidebar (max-width: 300px) {
  .widget {
    font-size: 0.875rem;
  }
}
 
@container main (min-width: 800px) {
  .article {
    column-count: 2;
  }
}

/* The card works anywhere — sidebar, grid, full-width */
.card-wrapper {
  container-type: inline-size;
}
 
.card {
  /* Stacked layout by default (narrow context) */
  display: grid;
  gap: 1rem;
}
 
.card__image {
  aspect-ratio: 16 / 9;
}
 
/* Side-by-side layout when there's enough room */
@container (min-width: 480px) {
  .card {
    grid-template-columns: 200px 1fr;
    align-items: start;
  }
 
  .card__image {
    aspect-ratio: 1;
  }
}
 
/* Richer layout at wide sizes */
@container (min-width: 720px) {
  .card {
    grid-template-columns: 320px 1fr;
  }
 
  .card__meta {
    display: flex;
    gap: 1rem;
  }
}

container-type: normal;       /* Default — not a container */
container-type: inline-size;  /* Queries based on inline (usually width) dimension */
container-type: size;         /* Queries based on both inline and block dimensions */

/* Relative to the nearest container */
.responsive-text {
  font-size: clamp(1rem, 4cqi, 2rem);
  /* cqi = 1% of container's inline size */
  /* cqb = 1% of container's block size */
  /* cqw, cqh = same but always width/height */
  /* cqmin, cqmax = minimum/maximum of the two */
}