.vt-container {
  display: grid;
  grid-template-columns: repeat(15, 1fr);
  gap: 1.5rem;
}

.vt-container-i {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.vt-box {}

.vt-item6 {
  grid-column: 1 / 15;
  background: #0f65e6;
  color: #f9fdfe;
  font-weight: bold;
  text-align: center;
  padding: 1.5rem;
}


.vt-item4 {
  grid-column: 1 / 7;
  position: relative;
}

.vt-item4 img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}


.vt-item5 {
  grid-column: 7 / 15;
  padding: 3rem 0rem;
}

.vt-item5 h2 {
  text-align: left;
}



.vt-item1 {
  grid-column: 3 / 6;
}

.vt-item2 {
  grid-column: 7 / 10;
}

.vt-item3 {
  grid-column: 11 / 14;
}



.vt-item1,
.vt-item2,
.vt-item3 {

  background-color: #2cb9bb;
  color: #f9fdfe;
  padding: 2rem 1.5rem 0rem 1.5rem;
  border-radius: 25px;
  transform: translateY(-25px) scale(1);
  transition: transform 500ms ease;
  will-change: transform;

}



@media (hover: hover) and (pointer: fine) {

  .vt-item1:hover,
  .vt-item2:hover,
  .vt-item3:hover {

    transform: translateY(-25px) scale(1.05);

  }

}



.vt-item1 a,
.vt-item2 a,
.vt-item3 a {

  color: #f9fdfe;

}



:is(.vt-item1, .vt-item2, .vt-item3) a:hover,
:is(.vt-item1, .vt-item2, .vt-item3) a:visited,
:is(.vt-item1, .vt-item2, .vt-item3) a:active {

  color: #0d2328;

}





/* ===========================
   1439 PX
=========================== */


@media (max-width:1439px) {


  .vt-container {

    grid-template-columns: 2.5fr 1fr;

    grid-template-areas:
      "item4 item1"
      "item4 item2"
      "item4 item3"
      "item5 item5";

  }



  /* reset desktop grid-column */

  .vt-item1,
  .vt-item2,
  .vt-item3,
  .vt-item4,
  .vt-item5 {

    grid-column: auto;

  }



  .vt-item1 {
    grid-area:item1;
  }


  .vt-item2 {
    grid-area:item2;
  }


  .vt-item3 {
    grid-area:item3;
  }


  .vt-item4 {
    grid-area:item4;
  }


  .vt-item5 {
    grid-area:item5;
  }



  .vt-item1,
  .vt-item2,
  .vt-item3 {

    padding:6rem 1.5rem 3rem 1.5rem;
    transform:translateY(0) scale(1);
    align-self:center;

  }



  .vt-item1:hover,
  .vt-item2:hover,
  .vt-item3:hover {

    transform:translateY(0) scale(1);

  }


  .vt-item5 h2 {

    text-align:left;

  }


}






/* ===========================
   991 PX
=========================== */


@media (max-width:991px) {


  .vt-container {

    grid-template-columns:repeat(3,1fr);

    grid-template-areas:

      "item4 item4 item4"
      "item5 item5 item5"
      "item1 item2 item3";

  }



  .vt-item1,
  .vt-item2,
  .vt-item3,
  .vt-item4,
  .vt-item5 {

    grid-column:auto;

  }



  .vt-item1 {
    grid-area:item1;
  }


  .vt-item2 {
    grid-area:item2;
  }


  .vt-item3 {
    grid-area:item3;
  }


  .vt-item4 {
    grid-area:item4;
  }


  .vt-item5 {
    grid-area:item5;
  }




  .vt-item1,
  .vt-item2,
  .vt-item3 {

    padding:2rem 0.75rem 0;
    transform:translateY(-50px) scale(1);
    font-size:1.25rem;

  }




  .vt-item1:hover,
  .vt-item2:hover,
  .vt-item3:hover {

    transform:translateY(-50px) scale(1);

  }



  .vt-item4 img {

    width:75%;
    margin:0 auto;

  }



  .vt-item5 {

    transform:translateY(-25px);

  }



  .vt-item5 h2 {

    text-align:center;

  }


}