Creating Universal Part

Let's develop a profile card that looks perfect in narrow sidebar, page center, and list.

.member-card {
  container-type: inline-size;
  border: 1px solid #eee;
  padding: 1rem;
}

.member-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* If lots of space — switch to horizontal view */
@container (width > 450px) {
  .member-inner {
    flex-direction: row;
    text-align: left;
    gap: 2rem;
  }
  .member-avatar { width: 100px; }
}

/* If LOTS of space — increase font and add decoration */
@container (width > 800px) {
  .member-name { font-size: 2.5rem; }
  .member-card { background: #f9f9f9; }
}

Why Is This Cool?

You can add this card anywhere on your site. You don't need to know what screen width is there — card will itself " understand " how best to position itself.