.htools {
  margin: clamp(12px, 3vw, 28px) 0 var(--section-margin);
  position: relative;
}
.htools--vertical:before {
  content: url("../../../../assets/img/gradient.webp");
  position: absolute;
  top: -100%;
  right: 0;
  pointer-events: none;
}
.htools__title {
  margin-bottom: 20px;
}
.htools__wrapper {
  padding: var(--card-padding);
  border-radius: 24px;
  background-color: var(--color-bg-beige);
}
.htools--vertical .htools__wrapper {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 60px;
}
.htools--vertical .htools__top {
  display: contents;
}
.htools__feature {
  padding: 8px;
  display: flex;
  gap: 12px;
  align-items: center;
  border-radius: 20px;
  background: #fff;
}
.htools__feature + .htools__feature {
  margin-top: 20px;
}
.htools--vertical .htools__icon {
  width: clamp(32px, 5.5vw, 64px);
  flex: 0 0 clamp(32px, 5.5vw, 64px);
  height: clamp(32px, 5.5vw, 64px);
  background: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: clamp(6px, 1vw, 12px);
}
.htools--vertical .htools__icon img {
  max-width: clamp(12px, 3vw, 24px);
}
.htools--horizontal .htools__title {
  max-width: 901px;
  margin: 0 auto 20px;
  text-align: center;
}
.htools--horizontal .htools__snippet {
  max-width: 901px;
  margin: 0 auto clamp(27px, 4.5vw, 60px);
  text-align: center;
}
.htools--horizontal .htools__features {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.htools--horizontal .htools__feature {
  flex-direction: column;
  align-items: start;
  margin-top: 0;
  padding: var(--card-padding);
  border-radius: 24px;
}
.htools--horizontal .htools__top {
  display: flex;
  align-items: start;
  gap: 12px;
}
.htools--horizontal .htools__icon {
  transform: translateY(1px);
}
@media (width < 1160px) {
  .htools--vertical:before {
    display: none;
  }
  .htools--vertical .htools__wrapper {
    display: block;
  }
  .htools--horizontal .htools__features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (width < 768px) {
  .htools__feature {
    padding: 12px;
  }
  .htools--horizontal .htools__features {
    grid-template-columns: minmax(0, 1fr);
  }
}

/*# sourceMappingURL=style.css.map */