.activity-log {
  inline-size: min(92ch, 100vw);
  text-align: start;
}

.activity-log__header {
  inline-size: min(72ch, 100%);
  text-align: center;
}

.activity-log__list {
  display: grid;
  gap: var(--block-space);
  inline-size: min(84ch, 100%);
  padding: 0;
}

.activity-log__entry {
  align-items: start;
  background: var(--color-bg);
  border: 1px solid var(--color-subtle);
  border-radius: 0.5em;
  display: grid;
  gap: var(--inline-space);
  grid-template-columns: auto 1fr;
  padding: var(--block-space) var(--inline-space);
}

.activity-log__marker {
  align-items: center;
  background: var(--color-subtle-light);
  border: 1px solid var(--color-subtle);
  border-radius: 50%;
  display: inline-flex;
  inline-size: 2.2em;
  aspect-ratio: 1;
  justify-content: center;
}

.activity-log__marker img {
  block-size: 1.1em;
  inline-size: 1.1em;
}

.activity-log__entry-header {
  align-items: start;
  display: flex;
  gap: var(--inline-space);
  justify-content: space-between;
}

.activity-log__title,
.activity-log__user {
  display: block;
}

.activity-log__time {
  flex-shrink: 0;
  text-align: end;
}

.activity-log__meta {
  display: grid;
  gap: var(--block-space-half) var(--inline-space);
  grid-template-columns: repeat(auto-fit, minmax(18ch, 1fr));
  margin: 0;
}

.activity-log__meta div {
  min-inline-size: 0;
}

.activity-log__meta dt {
  font-weight: 700;
}

.activity-log__meta dd {
  margin: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 70ch) {
  .activity-log__entry-header {
    flex-direction: column;
  }

  .activity-log__time {
    text-align: start;
  }
}