#posts {
    display: grid;
    grid-gap: 2em;
    gap: 2em;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  }

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

    padding: 0;
    border: 1px solid #e9ecef;
    border: 1px solid var(--border-color, #e9ecef);
    border-radius: 0.5rem;
    border-radius: var(--border-radius, 0.5rem);

  }

  .post img {
      -o-object-fit: cover;
         object-fit: cover;

      height: 250px;
    }

  .post img.empty {
        -o-object-fit: contain;
           object-fit: contain;

      }

  .post .content {
      padding: 1rem;
      display: grid;
      grid-gap: 0.5rem;
      gap: 0.5rem;
    }

  .post .date {
      color: gray;
      color: var(--text-secondary, gray);
      font-family: 'Courier New', Courier, monospace;

    }

  .post .title {
      font-size: large;
      margin-top: 0.5rem;
    }

  .post .summary {
      text-wrap: pretty;
      font-size: 1rem;
      max-height: 5lh;
      overflow: hidden;
      text-overflow: ellipsis;
    }

  @media screen and (max-width: 800px) {
    #data-container {
      display: flex;
      flex-direction: column;
    }

  }