.service {
  background-color: white;
  padding: 78px 20px 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.service-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 70px 0 60px;
  gap: 40px;
}

.title {
  height: 43px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--font-h3);
  font-weight: var(--font-weight-bold);
}

.strong {
  color: var(--brand-tertiary);
}

.sub-title {
  text-align: center;
  font-size: var(--font-b2);
  color: #777777;
  line-height: 30px;
}

.service-inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.service-card {
  height: 596px;
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 45px;
  gap: 30px;
}

.service-card h2 {
  font-size: var(--font-h4);
  font-weight: var(--font-weight-bold);
  line-height: 1.42;
  margin-bottom: 20px;
}

.service-card span {
  font-size: var(--font-b2);
  color: #777777;
  line-height: 30px;
  text-align: left;
  word-break: break-word;
}

.service-card.first {
  background-color: #fff6ce;
}

.service-card.first img {
  width: 200px;
  height: auto;
}

.service-card.second {
  background-color: #dcf3ff;
}

.service-card.second img {
  width: 250px;
  height: auto;
}

.service-card.third {
  background-color: #ffedf8;
}

.service-card.third img {
  width: 212px;
  height: auto;
}

@media (min-width: 800px) {
  .service {
    padding: 88px 20px 91px;
  }

  .service-header {
    margin: 91px 0 102px;
  }

  .title {
    height: 75px;
    font-size: var(--font-h1);
  }

  .sub-title {
    font-size: var(--font-h4);
    line-height: 1.42;
  }

  .service-card {
    height: 978px;
    border-radius: 65px;
    padding: 100px 60px;
    gap: 87px;
  }

  .service-card h2 {
    font-size: var(--font-h2);
    line-height: 1.33;
    margin-bottom: 30px;
  }

  .service-card span {
    font-size: var(--font-h4);
    line-height: 1.42;
  }

  .service-card.first img {
    width: 496.5px;
  }

  .service-card.second img {
    width: 504.88px;
  }

  .service-card.third img {
    width: 442.28px;
  }
}

@media (min-width: 1280px) {
  .service {
    padding: 88px 40px 77px;
  }

  .service-header,
  .service-inner {
    max-width: 1200px;
  }

  .service-inner {
    gap: 60px;
  }

  .service-card {
    height: 618px;
    padding: 0px;
    gap: 0;
    flex-direction: row;
  }

  .service-card.first {
    padding: 60px;
    gap: 87px;
  }

  .service-card.second {
    padding: 0 84.62px 0px 60px;
    gap: 54px;
  }

  .service-card.third {
    gap: 88px;
    padding: 0px 113.22px 0px 60px;
  }

  .service-card.second img {
    order: 2;
  }
}