:root {
  --submitted-align-items: center;
  --submitted__author-display: none;
  --submitted__author-created-display: flex;
  --submitted__author-created-fz: 16px;
  --submitted__author-created-lh: 24px;
  --submitted__author-created-color: #AFAFAF;
}

.submitted__author--mobile {
  --submitted__author-display: none;
}

.submitted__author--desktop {
  --submitted__author-display: flex;
}

@media (max-width: 575.98px) {
  :root {
    --submitted-align-items: flex-start;
    --submitted__author-created-display: none;
    --submitted__author-created-lh: 21px;
  }

  .submitted__author--mobile {
    --submitted__author-display: flex;
  }

  .submitted__author--desktop {
    --submitted__author-display: none;
  }
}

.submitted {
  display: flex;
  align-items: var(--submitted-align-items);
  gap: 16px;
}

.submitted__author {
  display: var(--submitted__author-display);
}

.submitted__author--mobile {
  gap: 8px;
  align-items: flex-start;
  --avatar-size: 40px;
  --submitted__author-created-fz: 14px;
  --submitted__author-created-display: flex;
}

.submitted__author-info {
  display: flex;
  flex-direction: column;
  line-height: 21px;
}

.submitted__author-username {
  font-weight: 500;
  font-size: 14px;
  color: #363636;
}

.submitted__author-created {
  display: var(--submitted__author-created-display);
  font-weight: 400;
  font-size: var(--submitted__author-created-fz);
  line-height: var(--submitted__author-created-lh);
  color: var(--submitted__author-created-color);
}