.postcard-layout {
  a {
    color: var(--color-text);
  }

  .postcard-item {
    padding: 1rem;
    background-color: var(--color-background-card);
    border-radius: .375rem;
    margin: 2rem 0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);

    &:hover {
      background-color: var(--color-background-hover);
    }

    .postcard-title {
      @include text-xl;
      @include font-medium;
    }
  
    .postcard-summary {
      @include text-xs;
      color: var(--color-text-secondary);
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      margin: .5rem 0;
    }

    .postcard-metadata {
      @include text-xs;
      color: var(--color-text-secondary);
    }
  }
}