flynt-component[name='BlockPostHeader'] {
  &[data-thumbnail='false'] {
    margin-block-end: var(--component-spacing);
  }

  > .container {
    padding-block: var(--component-spacing);
    padding-inline: var(--container-spacing);
  }

  .content * + * {
    --flow-space: 2rem;
  }

  .meta {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    font-size: var(--font-size-body-small);

    > *:not(:last-child) {
      &::after {
        background-color: var(--color-accent);
        block-size: 2px;
        content: '';
        display: inline-block;
        inline-size: 8px;
        margin-block: 0;
        margin-inline: 0.5rem;
        vertical-align: middle;
      }
    }

    a {
      color: var(--color-text);
      text-decoration: none;
    }

    .author {
      align-items: center;
      display: flex;
      text-decoration: none;

      .avatar {
        block-size: 32px;
        border-radius: 100%;
        inline-size: 32px;
        margin-inline-end: 0.75rem;

        @media (min-width: $breakpoint-mobile-horizontal) {
          block-size: 48px;
          inline-size: 48px;
        }
      }
    }
  }

  flynt-component[name='BlockImage'] {
    margin-block: calc(-1 * var(--component-spacing) / 2) calc(var(--component-spacing) / 2);
  }
}
