.BlogList {
  display: flex;
  align-items: start;
  gap: 24px;
  flex-flow: row wrap;
  margin-top: 90px;

  @media (max-width: 992px) {
    margin-top: 60px;
  }

  @media (max-width: 576px) {
    margin-top: 40px;
    gap: 16px;
  }

  .Item {
    width: calc(33.33% - 16px);

    @media (max-width: 992px) {
      width: calc(50% - 12px);
    }

    @media (max-width: 576px) {
      width: 100%;
    }

    .Image {
      aspect-ratio: 418/252;
      border-radius: 16px;
      overflow: hidden;
      position: relative;

      @media (max-width: 576px) {
        border-radius: 12px;
      }

      span {
        background-color: var(--black-color);
        color: var(--white-color);
        padding: 4px 12px;
        border-radius: 50px;
        position: absolute;
        top: 16px;
        left: 16px;
        font-size: 14px;

        @media (max-width: 576px) {
          font-size: 12px;
          top: 10px;
          left: 10px;
        }
      }
    }

    h3 a {
      margin-top: 15px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-decoration: none;
      color: black;

      @media (max-width: 576px) {
        font-size: 18px;
      }
    }
    

    p {
      margin: 10px 0;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;

      @media (max-width: 576px) {
        font-size: 14px;
      }
    }

    .Primary_btn {
      font-size: 14px;

      @media (max-width: 576px) {
        font-size: 13px;
      }
    }
  }
}
.BlogList .Item h3 {
  margin-top: 15px;
  font-size: 24px; /* increase if needed */
  font-weight: 600;
  line-height: 1.3;
}

.BlogList .Item h3 a {
  color: #000;
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;

  font-size: inherit;      /* ⭐ FIX */
  font-weight: inherit;    /* optional */
}

/* hover effect (optional but recommended) */
.BlogList .Item h3 a:hover {
  color: var(--primary-color);
}