.dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18em, 1fr));
  grid-column-gap: var(--spacing);
  grid-row-gap: var(--spacing);

  .panel {
    &:not(:last-child) {
      padding-right: var(--spacing);
      border-right: var(--line-width) solid var(--line-color);
    }
  }

}

.post {
  padding-top: var(--small-spacing);
  padding-bottom: var(--small-spacing);
  margin-bottom: var(--small-spacing);

  &:not(:last-child) {
    border-bottom: var(--line-width) solid var(--line-color);
  }

  h3 {
    margin: 0;
    margin-bottom: var(--small-spacing);
  }


  .date {
    /* font-style: italic; */
    font-size: 1rem;
    color: color-mix(in srgb, var(--color-text), var(--color-background) 70%);
    margin-bottom: var(--small-spacing);
    /* font-family: serif; */

  }

  .images {
    display: grid;
    gap: var(--spacing);
    /* Spacing between images */
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }

  /* the text body of a social media post */
  .social-body {
    overflow-wrap: anywhere;
    /* long urls should not widen the column */

    p:first-child {
      margin-top: 0;
    }

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

  /* markup that came from a feed, so it has to be constrained to the column */
  .feed-body {
    overflow-wrap: anywhere;

    p:first-child,
    h1:first-child,
    h2:first-child,
    h3:first-child {
      margin-top: 0;
    }

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

    /* feed headings should not outshout the post title */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      font-size: 1.1rem;
      margin: var(--small-spacing) 0;
    }

    ul,
    ol {
      padding-left: 1.2em;
    }

    blockquote {
      margin-left: 0;
      padding-left: var(--small-spacing);
      border-left: var(--line-width) solid var(--line-color);
    }

    table {
      display: block;
      overflow-x: auto;
      /* wide tables scroll instead of stretching the column */
      max-width: 100%;
    }

    img {
      display: block;
      /* feeds set width/height attributes on the tag, so the intrinsic ratio
         has to be restored explicitly or the image gets squashed */
      max-width: 100%;
      width: auto;
      height: auto;
      margin-bottom: var(--small-spacing);
    }
  }
}

.images {
  img {
    width: 100%;
    max-width: 450px;
    height: auto;
    object-fit: cover;
    /* Ensures images look good without distortion */
  }
}