.thing-grid {
  display: grid;
  /* grid-template-columns: repeat(3, minmax(0, 1fr)); */
  grid-template-columns: repeat(auto-fit, minmax(280px, 100%));
  gap: 1rem;
  
  a {
    text-decoration: none;
  }
  
  .thing-grid-item {
    position: relative;
    min-width: 0;
    width: 100%;
    border: 1px solid var(--color--border-low-contrast);
    overflow-y: hidden;
    
    &:hover {
      border: 1px solid var(--color--border-mid-contrast);  
    }
    
    .actions {
      visibility: hidden;
      position: absolute;
      padding: 0.5rem;
      background-color: var(--color--bg-base);
      
      top: 0.5rem;
      right: 0.5rem;
      
      gap: 1rem;
    }
    
    .content {
        display: block;
        width: 100%;
        aspect-ratio: 1 / 1;
        overflow: hidden;
        padding: 8px;
        img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: contain;  
        }
    }
    
    &:hover {
      .actions {
        visibility: visible;
      }
      
      .content img {
          object-fit: cover;  // or "contain" if you hate cropping
      }
    }
    
    .info:not(.always-present) {
      transform: translateY(100%);
      background-color: var(--color--bg-base);
    }
    &:hover .info:not(.always-present) {
      transform: translateY(0);
    }
    
    .info {
      padding: 0.5rem;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      font-size: 12px;
      
      background-color: var(--color--bg-base);
      
    }
    
      .title {
        display: flex;
        flex-direction: row;
        gap: 0.5rem;
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .relative-time {
        color: var(--color--aa-text);
      }
  }
}