<div class="card">
  <div class="card__media">
    <div class="media__object">
      <img src="https://picsum.photos/400/400?random=2" alt="" class="media__thumb">
    </div>
    <div class="media__content">
      <h3 class="media__title">Kenneth Erickson</h3>
    </div>
    <div class="media__action">
      <svg class="icon--more" t="1650512764559" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2037" width="200" height="200">
        <path d="M227.14123 413.647995c-52.14973 0-94.587262 42.439578-94.587262 94.587262 0 52.14973 42.437531 94.587262 94.587262 94.587262 52.147684 0 94.587262-42.437531 94.587262-94.587262C321.728492 456.087573 279.288914 413.647995 227.14123 413.647995z" p-id="2038" fill="currentColor"></path>
        <path d="M510.903016 413.647995c-52.14973 0-94.587262 42.439578-94.587262 94.587262 0 52.14973 42.437531 94.587262 94.587262 94.587262 52.147684 0 94.587262-42.437531 94.587262-94.587262C605.490278 456.087573 563.051723 413.647995 510.903016 413.647995z" p-id="2039" fill="currentColor"></path>
        <path d="M794.665825 413.647995c-52.14973 0-94.587262 42.439578-94.587262 94.587262 0 52.14973 42.437531 94.587262 94.587262 94.587262 52.147684 0 94.587262-42.437531 94.587262-94.587262C889.253086 456.087573 846.813508 413.647995 794.665825 413.647995z" p-id="2040" fill="currentColor"></path>
      </svg>
    </div>
  </div>
  <div class="card__body">
    <p class="card__description">The word "coffee" entered the English language in 1582 via the Ddutch koffie， via the Ddutch koffie aoeo</p>
  </div>
  <div class="card__footer">
    <ul class="card__social">
      <li>
        <svg class="icon--like" t="1650513030512" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3007" width="200" height="200">
          <path d="M64 483.04V872c0 37.216 30.144 67.36 67.36 67.36H192V416.32l-60.64-0.64A67.36 67.36 0 0 0 64 483.04zM857.28 344.992l-267.808 1.696c12.576-44.256 18.944-83.584 18.944-118.208 0-78.56-68.832-155.488-137.568-145.504-60.608 8.8-67.264 61.184-67.264 126.816v59.264c0 76.064-63.84 140.864-137.856 148L256 416.96v522.4h527.552a102.72 102.72 0 0 0 100.928-83.584l73.728-388.96a102.72 102.72 0 0 0-100.928-121.824z" p-id="3008" fill="currentColor"></path>
        </svg>
        783 Likes
      </li>
      <li>
        <svg class="icon--comment" t="1650513069282" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3826" width="200" height="200">
          <path d="M512 0C226.742857 0 0 197.485714 0 446.171429c0 138.971429 73.142857 270.628571 190.171429 351.085714L190.171429 1024l226.742857-138.971429c29.257143 7.314286 65.828571 7.314286 95.085714 7.314286 285.257143 0 512-197.485714 512-446.171429C1024 197.485714 797.257143 0 512 0zM256 512C219.428571 512 190.171429 482.742857 190.171429 446.171429S219.428571 380.342857 256 380.342857c36.571429 0 65.828571 29.257143 65.828571 65.828571S292.571429 512 256 512zM512 512C475.428571 512 446.171429 482.742857 446.171429 446.171429S475.428571 380.342857 512 380.342857c36.571429 0 65.828571 29.257143 65.828571 65.828571S548.571429 512 512 512zM768 512C731.428571 512 702.171429 482.742857 702.171429 446.171429s29.257143-65.828571 65.828571-65.828571c36.571429 0 65.828571 29.257143 65.828571 65.828571S804.571429 512 768 512z" p-id="3827" fill="currentColor"></path>
        </svg>
        67 Comments
      </li>
    </ul>
  </div>
</div>

<div class="card">
  <div class="card__media">
    <div class="media__object">
      <img src="https://picsum.photos/400/400?random=2" alt="" class="media__thumb">
    </div>
    <div class="media__content">
      <h3 class="media__title">Kenneth Erickson</h3>
      <h5 class="media__subtitle">San Diego,CA</h5>
    </div>
    <div class="media__action">
      <svg class="icon--more" t="1650512764559" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2037" width="200" height="200">
        <path d="M227.14123 413.647995c-52.14973 0-94.587262 42.439578-94.587262 94.587262 0 52.14973 42.437531 94.587262 94.587262 94.587262 52.147684 0 94.587262-42.437531 94.587262-94.587262C321.728492 456.087573 279.288914 413.647995 227.14123 413.647995z" p-id="2038" fill="currentColor"></path>
        <path d="M510.903016 413.647995c-52.14973 0-94.587262 42.439578-94.587262 94.587262 0 52.14973 42.437531 94.587262 94.587262 94.587262 52.147684 0 94.587262-42.437531 94.587262-94.587262C605.490278 456.087573 563.051723 413.647995 510.903016 413.647995z" p-id="2039" fill="currentColor"></path>
        <path d="M794.665825 413.647995c-52.14973 0-94.587262 42.439578-94.587262 94.587262 0 52.14973 42.437531 94.587262 94.587262 94.587262 52.147684 0 94.587262-42.437531 94.587262-94.587262C889.253086 456.087573 846.813508 413.647995 794.665825 413.647995z" p-id="2040" fill="currentColor"></path>
      </svg>
    </div>
  </div>
</div>

<div class="alert">
  <p>您的浏览器暂时还不支持CSS的<code>:has</code>选择器。请使用 Safari 15.4 或 Chrome Canary 最新版本查看(^_^)!</p>
</div>

@import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  min-height: 100vh;
  font-family: "Exo", Arial, sans-serif;
  background-color: #557;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 20px;
  padding: 80px 20px 20px;
}

ul {
  list-style: none outside none;
}

.card {
  display: flex;
  align-items: center;
  border-radius: 18px;
  background: linear-gradient(to right, #4b56e4, #6b4cbf);
  box-shadow: 0 0.25rem 0.5rem -0.15rem hsla(0 0% 0% / 55%);
  padding: 24px;
  color: #fff;
  width: 380px;
}

.card__media {
  display: flex;
  align-items: center;
  width: 100%;
}

.media__object {
  width: 64px;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 14px;
}

.media__object img {
  max-width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
}

.media__content {
  flex: 1;
  min-width: 0;
}

.media__action {
  margin-left: auto;
}

.card svg {
  width: 1em;
  height: 1em;
}

.media__title + .media__subtitle {
  margin-top: 6px;
  color: #d9d9d9;
}

.icon--more {
  font-size: 32px;
}

.card__body {
  margin: 30px 0;
  font-size: 14px;
  line-height: 1.5;
  color: #b0b1ee;
}

.card__description {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.card__footer {
  margin-top: auto;
  width: 100%;
  padding-top: 24px;
}

.card__social {
  display: flex;
  align-items: center;
  color: #b0b1ee;
  font-size: 14px;
  gap: 30px;
}

.card__social li {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  line-height: 1;
}

.card:has(p, ul) {
  flex-direction: column;
  align-items: flex-start;
}

.card:has(p, ul) .media__object {
  width: 32px;
}

.card__media:not(:has(.media__subtitle)) {
  font-size: 12px;
}

.card__media:not(:has(.media__subtitle)) .icon--more {
  font-size: 24px;
}

@supports not selector(:has(works)) {
  .card {
    flex-direction: column;
    align-items: flex-start;
  }
}

.alert {
  display: flex;
  justify-content: center;
  position: fixed;
  padding: 1rem;
  background-color: #ffeeee;
  font-size: 0.75rem;
  top: 0;
  left: 0;
  right: 0;
  color: red;
}

.alert code {
  display: inline-flex;
  padding: 0.25em 0.5em;
  font-weight: bold;
  background-color: #3f51b5;
  color: #fff;
  border-radius: 3px;
  margin: 0 5px;
}

@supports selector(:has(*)) {
  .alert {
    display: none;
  }
}