.record-grid {
  --record-grid-min-column-width: 280px;
  --thing-grid-item-aspect-ratio: 1 / 1;
  --thing-grid-font-size--body: var(--font-size--body);
  --thing-grid-font-size--ui: var(--font-size--ui);
  --thing-grid-line-height--ui: var(--line-height--ui);
  --thing-grid-padding: 1rem;

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--record-grid-min-column-width), 1fr));
}

.record-grid > * {
  min-width: 0;
}

.thing-grid {
  gap: 0;
  margin-inline: -1px;
  padding-top: 1px;
  padding-left: 1px;
}

/* Keep max-width in sync with --breakpoint--touch-phone.
   CSS custom properties cannot be used in media query conditions. */
@media (max-width: 27.5rem) {
  .record-grid {
    --thing-grid-item-aspect-ratio: 1 / 1;
    --thing-grid-font-size--body: 11px;
    --thing-grid-font-size--ui: 11px;
    --thing-grid-line-height--ui: 1.7;
    --thing-grid-padding: 0.5rem;

    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.thing-grid-frame {
  min-width: 0;
}

.thing-grid > .thing-grid-frame {
  margin-top: -1px;
  margin-left: -1px;
}

.thing-grid-item {
  /* todo Move this style? */
  a { text-decoration: none; }

  position: relative;
  display: flex;
  overflow: visible;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  border: 1px solid var(--color--border-low-contrast);
  aspect-ratio: var(--thing-grid-item-aspect-ratio, 1 / 1);

  .card-link {
    position: absolute;
    inset: 0;
    z-index: 0;
  }
  
  .thing-indicators {
    position: absolute;
    right: 0.75rem;
    bottom: 0.75rem;
    z-index: 2;

    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.25em;
  }

  .thing-indicator {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.25em;

    padding: 0.5em;
    border: 1px solid var(--color--border-low-contrast);
    border-radius: 4px;

    background-color: var(--color--bg-base);
    font-size: var(--font-size--small);
    line-height: 100%;
  }

  .actions {
    position: absolute;
    right: 0.5rem;
    bottom: 0.5rem;
    z-index: 3;
    visibility: hidden;
    gap: 1rem;
    padding: 0.5rem;
    background-color: var(--color--bg-raised);
    border-radius: 4px;
    box-shadow: var(--card-shadow-and-border), var(--shadow-lg);
  }

  &:hover .actions { visibility: visible; }
  &:hover { z-index: 1; }

  .info {
    position: relative;
    z-index: 1;
    overflow: hidden;
    flex-shrink: 0;
    min-width: 0;
    padding: var(--thing-grid-padding, 1rem);
    font-size: var(--thing-grid-font-size--ui, var(--font-size--ui));
    line-height: var(--thing-grid-line-height--ui, 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; }

  .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; }

  .tags {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;

    &::-webkit-scrollbar {
      display: none;
      width: 0;
      height: 0;
    }

    .tag-link-container {
      flex: 0 0 auto;
    }
  }

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

  .content {
    position: relative;
    z-index: 1;
    overflow: hidden;
    flex: 1;
    min-height: 0;
    --lexxy-content-font-size: var(--thing-grid-font-size--body, var(--font-size--body));
    padding: var(--thing-grid-padding, 1rem);
    font-size: var(--thing-grid-font-size--body, var(--font-size--body));
    
    .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);
    .info { background-color: var(--color--bg-1); }

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

  .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: var(--thing-grid-padding, 1rem);
    line-height: normal;
    letter-spacing: normal;
    background-color: var(--color--bg-1);
  }
}