.posts-preview-wrapper {
  display: flex;
  flex-direction: column;
  padding: 2rem;

  h2 {
    margin: 0;
    padding: 0;
  }

  /* width */
  ::-webkit-scrollbar {
    height: .6rem;
  }

  /* Track */
  ::-webkit-scrollbar-track {
    border: 1px solid rgba(120 ,120, 120, 0.4);
  }

  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: var(--accent-color);
    cursor: pointer;
  }
}

.posts-preview-container {
  width: 100%;
  display: flex;
  padding: 1rem 2px;
  flex-direction: row;
  overflow-y: hidden;
  overflow-x: auto;
  gap: 1rem;
}

.post-preview-container {
  max-width: 16rem;
  min-width: 16rem;
  cursor: pointer;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  border: 1px solid transparent;

  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  background: white;

  h5 {
    margin: 0;
    margin-top: .5rem;
    font-weight: bold;
    text-wrap: nowrap;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  h4 {
    margin: 0;
    margin-top: .5rem;
    text-align: center;
  }

  button {
    margin-top: 1rem;
  }

  &:hover {
    border: 1px solid var(--accent-color);

    .post-title-full {
      background: var(--accent-color);
      display: block;
    }
  }
}

.post-thumbnail-wrapper {
  width: 100%;
  height: 100%;
  max-height: 9rem;
  display: flex;
  overflow: hidden;
  background: white;

  justify-content: center;
  aspect-ratio: 4 / 3;

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

@media screen and (max-width: 37.5em) {
  .posts-preview-container {
    flex-direction: column;
  }

  .post-preview-container {
    margin-left: auto;
    margin-right: auto;
    max-width: 12rem;
    min-width: 12rem;
  }
}