@layer components {
  .link-preview {
    display: flex;
    flex-direction: column;
  }

  .link-preview__text {
    color: oklch(44.6% 0.016 285.75);
    padding: var(--space-4);
    font-size: var(--text-sm);

    & h6 {
      font-size: var(--text-xl);
      margin-block-start: 0;
      font-weight: 600;
    }
  }

  .color-scheme.color-scheme--dark .link-preview__text {
    color: oklch(87.81% 0.01 258.34);
  }

  @media (prefers-color-scheme: dark) {
    .color-scheme:not(.color-scheme--light) .link-preview__text {
      color: oklch(87.81% 0.01 258.34);
    }
  }

  .link-preview .link-preview__image {
    inline-size: 100%;
    aspect-ratio: 2 / 1;
    object-fit: cover !important;
    margin: 0;
    border-end-start-radius: var(--radius-lg);
    border-end-end-radius: var(--radius-lg);
    box-shadow: none;
  }
}