.post .embed {
  display: flex;
  flex-direction: column;

  cursor: pointer;

  width: calc(100% - 2px);
  overflow: clip;

  margin-top: 0.5rem;
  background-color: rgb(var(--col-bg-0) / 1);
  border: 1px solid rgb(var(--col-bg-3) / 1);
  border-radius: 8px;
  font-size: 0.9em;
}

.post .post-body > .embed {
  margin-bottom: 0.5rem;
}

.embed .images {
  width: 100%;

  display: flex;
  flex-direction: row;
  justify-content: space-between;
  overflow-x: auto;
  gap: 1em;

  rainbow-blur,
  img {
    overflow: clip;

    aspect-ratio: var(--aspect-ratio);

    min-width: 4em;
    width: 100%;
    max-height: 36em;
    object-fit: contain;
    pointer-events: all;
  }
}

.embed .external {
  padding: 1em;
  width: calc(100% - 2em);
  max-height: 36em;
  text-overflow: ellipsis;

  section {
    display: flex;
    flex-direction: column;

    gap: 1em;
    align-items: stretch;
  }

  img {
    object-fit: cover;
    aspect-ratio: 1.91 / 1;
    width: 100%;
    border-radius: 4px;
  }
}

.embed .quote {
  padding: 1em;
  width: calc(100% - 2em);

  .topline {
    display: flex;
    flex-direction: row;
    justify-content: start;
    gap: 1ch;
    margin-bottom: 0.5em;
    color: rgb(var(--col-fg-muted) / 1);

    strong {
      color: rgb(var(--col-fg) / 1);
    }

    .avatar {
      height: 1em;
    }
  }
}
