.boxes {
  position: relative;
  width: 100%;
  padding: 80px 32px;
  text-align: center;
}

.boxes .content {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.boxes .text {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.boxes .text > * {
  max-width: 872px;
}

.boxes .list {
  max-width: 100%;
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
}
.boxes .scroll {
  display: flex;
  flex-direction: row;
  gap: 24px;
  overflow-x: scroll;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.boxes .scroll.spacing {
  padding-right: 17.75%;
}
.boxes .scroll.spacing div {
  min-width: calc(121.585% / 4 - 18px);
}
.boxes .scroll::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.boxes .scroll span {
  min-width: 292px;
  min-height: 236px;
  padding: 31px 23px;
  border: 1px solid #010741;
  border-radius: 4px;
}
.boxes .scroll span img {
  width: 32px;
  height: auto;
  aspect-ratio: 1;
}

.boxes .scroll span h5 {
  margin: 8px 0px 16px;
}

.boxes .scroll span p {
  font-size: 14px;
  line-height: 20px;
}

@media (max-width: 767px) {
  .boxes {
    padding: 48px 16px;
  }
  .boxes .content {
    gap: 32px;
  }

  .boxes .scroll {
    gap: 16px !important;
  }

  .boxes .scroll span {
    min-width: 265px;
    min-height: 232px;
    padding: 15px;
  }

  .boxes .scroll span h5 {
    height: auto;
    min-height: 48px;
  }
}