/* Change this value to resize the picture beside each post. */
:root { --post-avatar-size: 220px; }
.post-content:has(> .post-avatar-image) {
  display: grid;
  grid-template-columns: var(--post-avatar-size) minmax(0, 1fr);
  align-items: start;
  gap: 20px;
}
.post-message { display: flow-root; min-width: 0; }
.post-avatar-image {
  display: block;
  width: var(--post-avatar-size);
  height: var(--post-avatar-size);
  max-width: 100%;
  object-fit: cover;
  margin: 0;
  border: 1px solid var(--line, #555);
  border-radius: 3px;
}
/* Keep older custom header layouts usable until their template is updated. */
.post-meta .post-avatar-image {
  display: inline-block;
  width: 40px;
  height: 40px;
  max-width: 40px;
  margin: 0 .65rem .25rem 0;
}
@media (max-width: 760px) {
  :root { --post-avatar-size: 96px; }
  .post-content:has(> .post-avatar-image) { gap: 16px; }
}
.avatar-preview {
  display: block;
  width: 96px;
  height: 96px;
  object-fit: cover;
  margin: .75rem 0 1rem;
  border: 1px solid var(--line, #555);
  border-radius: 3px;
}
.avatar-settings .avatar-remove { margin-top: .75rem; }
.avatar-settings input[type="file"] { max-width: 100%; }