.grid {
  composes: box from '@shared/atoms/Box.module.css';
  background: var(--background-body-transparent);
  backdrop-filter: blur(3px);
  position: relative;
}

.description {
  color: var(--color-secondary);
  font-size: var(--font-size-small);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  margin-top: var(--spacer);
}

.description p:last-child {
  margin-bottom: 0;
}

.directMessage {
  margin-top: calc(var(--spacer) / 2);
  text-align: center;
}

@media (min-width: 50rem) {
  .grid {
    display: grid;
    gap: var(--spacer);
    /* lazy golden ratio */
    grid-template-columns: 1.618fr 1fr;
  }

  .description {
    margin-top: calc(var(--spacer) / 2);
    -webkit-line-clamp: 7 !important;
  }

  .directMessage {
    margin-top: 0;
    text-align: end;
  }
}

.publisherLinks {
  margin-top: calc(var(--spacer) / 2);
  margin-bottom: calc(var(--spacer) / 2);
}

.more {
  font-size: var(--font-size-mini);
  margin-left: calc(var(--spacer) / 8);
  cursor: pointer;
}

.meta {
  color: var(--color-secondary);
  font-size: var(--font-size-mini);
  position: absolute;
  right: calc(var(--spacer) / 3);
  bottom: calc(var(--spacer) / 6);
}