.social-post-preview {
  display: grid;
  width: 100%;
  flex-direction: column;
  gap: 12px;
  padding: 12px 0px;
  border-radius: 3px;
  box-shadow: var(
    --wds-shadow-surface-raised,
    0 0 6px rgba(0, 6, 36, 0.1),
    0 2px 4px rgba(0, 6, 36, 0.1)
  );
  background-color: var(--wds-color-fill-surface-raised, #ffffff);
  /* stylelint-disable-next-line plugin/use-baseline */
  word-break: break-word;

  a {
    pointer-events: none;
  }

  & &__post-header {
    display: flex;
    flex-direction: row;
    padding: 0px 12px;
    align-items: center;

    &--skin-instagram {
      column-gap: 6px;
    }
  }

  & &__post-caption {
    padding: 0px 12px;

    &--skin-instagram {
      display: flex;
      flex-direction: column;
      row-gap: 3px;
    }
  }

  & &__profile-name-and-publish-date {
    display: flex;
    flex-direction: column;
    padding-left: 6px;
    row-gap: 1px;
  }

  /* doubled to reach (0,3,0); Caption's own `c1` colour rule is (0,2,0) and
     takes over the colour if the doubling is dropped */
  &#{&} &__last-seen-caption {
    color: var(--wds-color-black-500, var(--wsr-color-D50, #acafc4));
  }
}