.service {
  padding: 0 4rem;
  margin-bottom: 9rem;
}

.container__services {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  gap: 14.2rem;
  padding: 3rem 4rem 3rem;
  border-bottom: 1px solid var(--color-white);
}

.container__services:nth-last-child(1) {
  border-bottom: none;
}

.service__left__img {
  height: 466px;
}
.service__right__text {
  padding-right: 20%;
}
.service__right__text p {
  margin: 2rem 0rem 5rem;
}

.service__right__text .service__link {
  font-weight: 500;
  font-size: 28px;
  line-height: 34px;
  color: var(--color-green);
  display: flex;
  gap: 3rem;
}

.service__right__text .service__link i {
  transform: rotate(45deg);
}

.solution {
  padding: 0 4rem;
  margin-bottom: 20rem;
}

.solution__items {
  /* display: grid; */
  column-count: 3;
  gap: 2rem;
  padding: 0 4rem;
}

.solution__item {
  margin: 0;
  margin-bottom: 2rem;
}

.solution__item > img {
  grid-row: 1 / -1;
  grid-column: 1;
}

.solution__top {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  margin-top: 3rem;
  margin-bottom: 6rem;
}
.solution__top__select {
  display: none;
  width: 100%;
  height: 56px;
  padding-left: 3rem;
  border: 1px solid var(--color-white);
  font-size: 2rem;
  background: transparent;
  color: var(--color-white);
  cursor: pointer;
  margin-bottom: 6rem;
}
.solution__top__select .option {
  color: var(--color-white);
  background-color: var(--color-black);
}

@media screen and (max-width: 1440px) {
  .container__services {
    gap: 8rem;
  }
  .service__left__img {
    height: 333px;
  }
  .service__right__text {
    padding-right: 10%;
  }
  .service__right__text p {
    margin: 2rem 0rem 3rem;
  }
  .services__gap {
    margin-bottom: 10rem;
  }
}

@media screen and (max-width: 1024px) {
  .container__services {
    gap: 4rem;
    padding: 3rem 0rem;
  }
  .container__services:nth-child(1) {
    padding: 0rem 0rem 3rem;
  }
  .service__left__img {
    height: 280px;
  }
  .service__right__text {
    padding-right: 0%;
  }
}

@media screen and (max-width: 912px) {
  .solution__items {
    display: grid;
    padding: 0 1rem;
  }
}

@media screen and (max-width: 768px) {
  .service {
    padding: 0 1rem;
    margin-bottom: 6rem;
  }

  .solution {
    padding: 0 1rem;
    margin-bottom: 9rem;
  }

  .container__services {
    grid-template-columns: 1fr;
  }

  .solution__top {
    display: none;
  }
  .solution__top__select {
    display: block;
  }
}

@media screen and (max-width: 480px) {
}