.thing-grid-v2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 100%));
  gap: 1rem;
  a { text-decoration: none; }

  .thing-grid-item-v2 {
    position: relative;
    display: flex;
    overflow: hidden;
    flex-direction: column;
    min-width: 0;
    border: 1px solid var(--color--border-low-contrast);
    aspect-ratio: 1 / 1;
    &:hover { border: 1px solid var(--color--border-mid-contrast); }

    .card-link {
      position: absolute;
      inset: 0;
      z-index: 0;
    }

    .actions {
      position: absolute;
      right: 0.5rem;
      bottom: 0.5rem;
      z-index: 2;
      visibility: hidden;
      gap: 1rem;
      padding: 0.5rem;
      background-color: var(--color--bg-base);
      border: 1px solid var(--color--border-low-contrast);
      border-radius: 4px;
      box-shadow: var(--shadow-lg);
    }

    &:hover .actions { visibility: visible; }

    .info {
      position: relative;
      z-index: 1;
      overflow: hidden;
      flex-shrink: 0;
      min-width: 0;
      padding: 0.75rem;
      font-size: var(--font-size--ui);
      line-height: var(--line-height--ui);
      /* background-color: var(--color--bg-base); */
      border-bottom: 1px solid var(--color--border-low-contrast);
    }

    &.has-images .info { display: none; }

    &.has-images:hover .info { display: block; }

    &:hover .info { border-bottom: 1px dashed var(--color--border-mid-contrast); }

    .title {
      display: flex;
      gap: 0.25rem;
      align-items: center;
      min-width: 0;
      .title-text {
        overflow: hidden;
        min-width: 0;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      turbo-frame {
        display: inline-flex;
        flex-shrink: 0;
      }

      .bookmark-toggle {
        display: inline-flex;
        flex-shrink: 0;
        &:not(.bookmarked) { visibility: hidden; }

        /* form { display: inline; } */
      }
    }

    &:hover .bookmark-toggle:not(.bookmarked) { visibility: visible; }

    .relative-time { color: var(--color--aa-text); }

    .content {
      position: relative;
      z-index: 1;
      overflow: hidden;
      flex: 1;
      min-height: 0;
      padding: 0.75rem;
      .images {
        display: grid;
        width: 100%;
        height: 100%;
      }

      .image-link {
        grid-area: 1 / 1;
        display: block;
        width: 100%;
        height: 100%;
      }

      img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }

    &:hover .content img { object-fit: cover; }

    /* Private state */
    &.private {
      background-color: var(--color--bg-1);
      border-color: transparent;
      .info { background-color: var(--color--bg-1); }

      .title-text { color: var(--color--aa-text); }

      &:hover { border-color: var(--color--border-mid-contrast); }
    }

    .private-footer {
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 1;
      pointer-events: none;
    }

    .private-fade {
      height: 40px;
      background: linear-gradient(to bottom, transparent, var(--color--bg-1));
    }

    .private-indicator {
      padding: 0.75rem;
      line-height: normal;
      letter-spacing: normal;
      background-color: var(--color--bg-1);
    }
  }
}