section.recent-posts {
  background: var(--color-tcc-white);
  position: relative;

  .recent-posts-heading {
    background: var(--color-tcc-blue);
    padding: 4rem 0;
  }

  h2 {
    color: var(--color-white);
    text-align: center;
    margin-bottom: 2rem;
    width: 100%;
  }

  .body {
    text-align: center;
    color: var(--color-white);
    margin-bottom: 2rem;
  }

  .btn-secondary,
  .btn-secondary:hover {
    color: var(--color-white);
  }

  h3 {
    color: var(--color-tcc-blue);
    font-size: var(--text-2xl);
    text-transform: none;
    text-wrap: pretty;
    line-height: 1.15;
  }

  .posts-container {
    position: relative;
    padding-bottom: 4rem;

    .post-item {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
      text-align: center;

      &:first-child .img-container::before {
        content: "";
        display: block;
        position: absolute;
        background: var(--color-tcc-blue);
        height: 50%;
        width: calc(100% + 4rem);
        left: -2rem;
        top: -1px;
        z-index: -2;
      }

      .img-container {
        z-index: 1;
        position: relative;
      }
    }

    .post-image {
      aspect-ratio: 1;
      object-fit: cover;
      border-radius: 100%;
      padding: 0;
      max-width: 60%;
      margin: auto;
    }

    .post-info {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      padding: 0;
    }

    .excerpt p {
      display: -webkit-box;
      -webkit-line-clamp: 4;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}

@media (min-width: 1024px) {
  section.recent-posts {
    .posts-container .post-item:not(:last-child) .post-info {
      border-right: 1px solid var(--color-tcc-black);
    }

    .posts-container .post-image {
      padding: 2rem;
      max-width: 100%;
    }

    .posts-container .post-info {
      padding: 0 2rem;
      gap: 2rem;
    }

    .posts-container .post-item {
      gap: 2rem;
    }

    .posts-container .post-item:first-child .img-container {
      position: unset;
    }

    .posts-container .post-item:first-child .img-container::before {
      height: 210px;
      width: 100%;
      left: 0;
    }
  }
}