@use '../abstracts/colors' as *;

.posts {
  height: 100%;
  margin-top: 1rem;
  flex-direction: column;
  overflow: auto;
  &__heading {
    display: flex;
    justify-content: space-between;
  }
  &-container {
    height: 100%;
    padding: 1rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 2rem;
    border: 1px solid transparentize($dark-color, 0.9);
    border-radius: 4px;
    overflow: auto;
    &-card {
      min-height: 240px;
      flex-direction: column;
      border: 1px solid transparentize($dark-color, 0.5);
      border-radius: 4px;
      cursor: pointer;
      text-align: center;
      & img {
        flex-basis: 90%;
        object-fit: cover;
      }
      & p {
        padding: 0 0.125rem;
        flex-basis: 10%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}
