.post {
  display: flex;
  flex-direction: column;
  max-width: 49ch
}

.post__content {
  display: flex;
  flex-direction: column;
  margin-bottom: 3.7em;
  margin-top: 1.85em;
  padding-top: 1.85em;
  position: relative
}

.post__content:before {
  background: var(--color-grey-3);
  content: "";
  height: 2px;
  left: 0;
  position: absolute;
  top: 0;
  width: 50%
}

@media(min-width: 64em)and (hover: hover)and (pointer: fine) {
  .post {
    max-width:39ch
  }
}

.posts {
  display: flex;
  flex-direction: column;
  max-width: 49ch
}

.posts__container {
  display: flex;
  flex-direction: column;
  font-size: var(--font-size-small);
  gap: calc(var(--line-height)*2);
  letter-spacing: normal;
  margin-bottom: 3.7em;
  margin-top: 3.7em
}

.posts__post {
  display: flex;
  flex-direction: column;
  gap: .6em
}

.posts__post time,
.posts__post .posts__post--unpublished {
  font-size: var(--font-size-small);
  line-height: 1;
  margin-bottom: -0.15em
}

.posts__post time a,
.posts__post .posts__post--unpublished {
  color: var(--color-grey-2);
  font-weight: 500;
  text-decoration: none
}

.posts__post .posts__post--unpublished {
  color: var(--color-orange);
}

.posts__post h3 {
  font-size: var(--font-size-xxx-large);
  font-weight: 700;
  line-height: 1.2;
  margin: 0
}

.posts__post p {
  margin: 0
}