.a-long-text
  .a-link-card,
  .twitter-tweet
    background-color: var(--base)
    border: solid 1px var(--border)
    padding: 1em
    border-radius: 4px
    width: 36rem
    max-width: 100%
    margin-inline: auto
    display: flex
    flex-direction: column
    gap: .5em
    img
      border: none
    div
      margin: 0

    .a-link-card__title-link
      display: inline-block
      max-width: 100%

    .a-link-card__title-text
      font-weight: 700
      max-width: 100%
      overflow: hidden
      display: -webkit-box
      text-overflow: ellipsis
      -webkit-box-orient: vertical
      -webkit-line-clamp: 2
      +text-block(1em 1.4)

    .a-link-card__favicon-image
      width: 1em
      min-width: 1em
      max-width: 1em
      height: 1em
      min-height: 1em
      max-height: 1em
      display: block
      &.is-blank
        display: none

    .a-link-card__body
      +text-block(.875em 1.4)
      color: var(--muted-text)
      display: flex
      gap: 1em
      p
        line-height: 1.4
        margin: 0

    .a-link-card__body-start
      flex: 2

    .a-link-card__body-end
      flex: 1

    .a-link-card__body-url-link
      overflow: hidden
      display: -webkit-box
      text-overflow: ellipsis
      -webkit-box-orient: vertical
      -webkit-line-clamp: 2

    .a-link-card__image
      +media-breakpoint-up(md)
        max-width: 12rem
      +media-breakpoint-down(sm)
        max-width: 7.5rem
      &.is-blank
        display: none

    .a-link-card__image-ogp
      object-fit: cover
      width: 100%
      aspect-ratio: 1.91 / 1
      border-radius: .25rem

    .a-link-card__site-title
      margin-top: .5em

    .a-link-card__site-title-link
      display: inline-flex
      gap: .25em
      align-items: center

    .a-link-card__site-title-text
      +text-block(.875em 1.4)
      flex: 1

  .twitter-tweet
    position: relative
    line-height: 1.4
    font-size: .875em
    color: var(--muted-text)
    +media-breakpoint-up(md)
      padding: 2em 3em 1em 2em
    +media-breakpoint-down(sm)
      padding: 2em 3em 1em 1em
    &::before
      font-family: "Font Awesome 6 Brands"
      font-weight: 400
      font-size: 1.5em
      content: "\e61b"
      +position(absolute, right .5em, top .5em)
      display: flex
      justify-content: center
      align-items: center
      width: 1em
      height: 1em
      color: #0f1419
    p
      font-size: 1.125em
      line-height: 1.6
      margin-bottom: 1em
      color: var(--default-text)
    >a:last-child
      color: var(--muted-text)
      text-decoration: none
    >a:last-child:hover
      color: var(--hover-text)
      text-decoration: underline
