.img-div {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 35vh 35vh 35vh;
    justify-content: center;
    row-gap: 25px;
  }


  .item-1:hover{
    transform: scale(1.03,1.03);
    box-shadow: 0 10px 16px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
    cursor: pointer;
  }

  .item-2:hover{
    transform: scale(1.03,1.03);
    box-shadow: 0 10px 16px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
    cursor: pointer;
  }


  .item-3:hover{
    transform: scale(1.03,1.03);
    box-shadow: 0 10px 16px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
    cursor: pointer;
  }


  .blog-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .blog-item {
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    color: white;
    position: absolute;
  }

  .item-info {
    color: white;
    /* padding-left: 8px;
    padding-right: 16px;
    background-color: var(--navbar-color); */
    left: 5%;
    position: absolute;
    bottom: 10%;
  }

  .blog-category {
    padding-top: 4px;
    padding-bottom: 4px;
    bottom: 25%;
    left: 5%;
    background-color: var(--border-color-before);
    width: 40%;
    text-align: left;
    padding-left: 16px;
    font-weight: 600;
    position: absolute;
    font-size: 14px
  }

  .blog-title {
    font-size: 14px;
    text-align: left;
    font-weight: 600;
  }

  .blog-date {
    margin-top: 2px;
    font-size: 11px;
    font-weight: 400;
    text-align: left;
  }

  @media only screen and (min-width: 768px) {
    .img-div {
      width: 100%;
      height: auto;
      margin-top: 20px;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: 33vh 33vh;
      justify-content: center;
      column-gap: 30px;
    }
  }

  @media only screen and (min-width: 1024px) {
    .blog-category{
      bottom: 32%;
    }
    .blog-category-1{
      bottom: 22%;
    }

    .blog-zone{
        margin-left: 4vw;
        margin-right: 4vw;
    }
    .img-div {
      width: 100%;
      height: auto;
      margin-top: 20px;
      display: grid;
      grid-template-columns: 1.75fr 1fr;
      grid-template-rows: 25vh 25vh;
      justify-content: center;
      column-gap: 30px;
    }

    .item-1{
      grid-column: 1;
      grid-row: 1 / span 2;
    }
    .item-2{
      grid-column: 2;
      grid-row: 1;
    }
    .item-3{
      grid-column: 2;
      grid-row: 2;
    }
    .item-info{
      bottom: 12%;
    }
  }

  @media only screen and (min-width: 1400px) {
    .blog-zone{
        margin-left: 16vw;
        margin-right: 16vw;
    }

    .blog-category{
      bottom: 32%;
  }
    .blog-category-1 {
      font-size: 18px;
      bottom: 25%;
  }

  .blog-title {
    font-size: 18px;
  }

  .blog-title-1 {
    font-size: 22px;
  }

  .blog-date-1 {
    font-size: 16px;
  }

  .item-info {
      bottom: 12%;
  }
  .item-info-1{
      bottom: 11% 
  }
  }