.post-container {
  display: flex;
  scroll-snap-align: start;
  background-color: white;
  border-radius: 7px;
  box-shadow: var(--box-shadow);
  color: var(--text-color);
  transition: background-color .3s ease-in-out;

  &:hover {
    cursor: pointer;
    background-color: color-mix(in srgb, white, black 5%);
  }

  .post-thumbnail-container {
    display: flex;
    align-items: center;
    flex: 1;
    width: 35%;

    .post-thumbnail {
      width: 100%;
      height: auto;
      border-radius: 7px;
      aspect-ratio: 500 / 385;
    }
  }

  .post-content {
    display: flex;
    flex-direction: column;
    flex: 2;
    gap: 8px;
    padding: 8px;

    p, h3 {
      margin: 0;

      a {
        text-decoration: none;
        &:hover,
        &:focus,
        &:active {
          color: var(--text-color);
        }
      }
    }

    .content-title {
      font-size: 1rem;
      font-weight: bold;
      font-family: var(--header-font-family);
    }

    .content-excerpt {
      color: var(--text-color);
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      text-overflow: ellipsis;
      display: -webkit-box;
      overflow: hidden;
      justify-self: flex-end;
      font-family: var(--general-font-family);

      @media (min-width: 768px) and (max-width: 1024px), (max-width: 567px) {
        -webkit-line-clamp: 2;
      }
    }

    .content-view-more {
      font-size: .75rem;
      /*color: var(--sorties-color); */
      margin-top: auto;
      font-family: var(--general-font-family);
    }
  }

  @media only screen and (min-width: 768px) {
    .post-content {
      padding: 16px;

      .content-title {
        font-size: 1.1rem;
      }

      .content-excerpt {
        font-size: 1rem;
        -webkit-line-clamp: 3;
      }

      .content-view-more {
        font-size: .9rem;
      }
    }
  }
}