.post-container img.avatar-dark,
.post-container img.avatar-light,
.post-container img.avatar-all {
  aspect-ratio: 1/1;
}
.post-container img.avatar-dark {
  display: none;
}
@media (prefers-color-scheme: dark) {
  .post-container img.avatar-dark {
    display: block;
  }
  .post-container img.avatar-light {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .post-container .friend-widget,
  .post-container .tag-widget,
  .post-container .archives-widget,
  .post-container .categories-widget,
  .post-container .recent-widget,
  .post-container .sns-container > *,
  .post-container .profile-container blockquote,
  .post-container .profile-container address {
    display: none;
  }
  .post-container .columns {
    display: grid;
  }
  .post-container .columns section.column {
    order: 2;
  }
  .post-container .columns aside.column {
    order: 1;
  }
  .post-container .columns aside.column .profile-widget {
    min-height: auto;
    padding-bottom: 10px;
    position: relative;
  }
  .post-container .columns aside.column .profile-widget #profile-toggle {
    aspect-ratio: 1/1;
    position: absolute;
    right: 10px;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28127,127,127,1%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e") no-repeat center center;
    transition: transform 0.6s linear;
  }
  .post-container .columns aside.column .profile-widget #profile-toggle.expanded {
    transform: rotate(90deg);
  }
}
@media screen and (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .post-container .columns aside.column .profile-widget #profile-toggle.expanded {
    transform: none;
  }
}
@media screen and (max-width: 768px) {
  .post-container .columns aside.column .profile-widget .profile-container {
    display: flex !important;
    flex-wrap: wrap;
    flex-direction: unset !important;
    justify-content: left !important;
    align-items: start !important;
  }
  .post-container .columns aside.column .profile-widget .profile-container .avatar {
    width: 30%;
    height: auto;
    margin-bottom: 10px;
    margin-left: 20px;
  }
  .post-container .columns aside.column .profile-widget .profile-container .user-name {
    display: inline-block;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: 20px;
  }
  .post-container .columns aside.column .profile-widget .profile-container blockquote {
    margin-top: 20px;
  }
  .post-container .columns aside.column .profile-widget .profile-container address {
    margin-top: 20px;
    margin-right: auto;
    margin-left: auto;
  }
}