.index-container {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 30px;
  padding: 5% 10%;
}
.index-container .item {
  display: flex;
  color: white;
  border-radius: 40px;
  padding: 60px 0 60px 40px;
  justify-content: space-between;
  cursor: pointer;
}
@media screen and (max-height: 686px) {
  .index-container .item {
    padding: 30px 0 30px 40px;
  }
}
.index-container .left {
  flex-grow: 0;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-right: 30px;
}
.index-container .left .title {
  font-size: 40px;
}
.index-container .left .btn {
  font-size: 24px;
  color: black;
  padding: 6px 3px;
  background-color: white;
  text-align: center;
  border-radius: 30px;
}
.index-container .right {
  flex: none;
}
.index-container .right img {
  width: 90%;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
@media (max-width: 1600px) {
  .index-container .right img {
    display: none;
  }
}
.index-container .item-1 {
  background: linear-gradient(135deg, #A788F8 0%, #8179F3 100%);
}
.index-container .item-1 .left .btn {
  color: #8179F3;
}
.index-container .item-2 {
  background: linear-gradient(135deg, #FBBE13 0%, #FF951D 100%);
}
.index-container .item-2 .left .btn {
  color: #F8911C;
}
.index-container .item-3 {
  background: linear-gradient(133deg, #8696F6 0%, #1625BB 100%);
}
.index-container .item-3 .left .btn {
  color: #1523B3;
}
.index-container .item-4 {
  background: linear-gradient(133deg, #EB704A 0%, #FE682E 100%);
}
.index-container .item-4 .left .btn {
  color: #FE682E;
}
.index-container .item-5 {
  background: linear-gradient(128deg, #17DFA5 0%, #0ED094 100%);
}
.index-container .item-5 .left .btn {
  color: #0ED094;
}
.index-container .item-6 {
  background: linear-gradient(112deg, #DA5AF8 0%, #BA4EFE 100%);
}
.index-container .item-6 .left .btn {
  color: #BB4EFD;
}