.c-icon-circle {
  width: 150px;
  height: 150px;
  background-color: var(--color-bg-01);
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;

  .c-icon-circle__image {
    width: 48px;
    height: 48px;
  }
}

.c-icon-box {
  display: grid;
  gap: 20px;

  .c-icon-box__icon {
    text-align: center;
  }

  .c-icon-box__title {
    text-align: center;

    .c-title-h6 {
      display: none;
    }
  }

  .c-icon-box__description {
    text-align: center;
    
    .c-title-h5 {
      font-weight: 400;
    }

    .c-title-h6 {
      display: none;
    }
  }
}

.c-icon-box-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;

  .c-icon-box-list__item {
    min-width: 220px;
    width: 220px;
  }
}

@media screen and (max-width: 768px) {
  .c-icon-circle {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }

  .c-icon-box {
    .c-icon-box__title {
      .c-title-h4 {
        display: none;
      }

      .c-title-h6 {
        display: inline;
      }
    }
  
    .c-icon-box__description {
      text-align: center;
      .c-title-h5 {
        display: none;
      }

      .c-title-h6 {
        display: inline;
        font-weight: 400;
      }
    }
  }

  .c-icon-box-list {
    gap: 40px 15px;
  
    .c-icon-box-list__item {
      width: calc((100% - 30px) / 3);
      min-width: calc((100% - 30px) / 3);
    }
  }
}