/*
  ICONS WITH TEXT SECTION STYLES
  ================================
  3 columns, each with an icon, a small heading, and a short description.
*/

.features {
  background-color: #f0e6ef; /* your default scheme-1 background */
  color: #372345;
  display: flex;
  justify-content: center;
  gap: 16px;
  padding: 48px 40px;
}

.features__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  flex: 1;
  max-width: 320px;
}

.features__icon {
  width: 32px;
  height: 32px;
  color: #372345; /* SVG uses "currentColor" for its stroke, meaning it
                      automatically matches whatever text color is set here --
                      no need to hardcode the color twice */
}

.features__item h3 {
  font-family: var(--font-primary);
  font-size: 1.25rem;
  margin: 0;
}

.features__item p {
  font-family: var(--font-body);
  font-size: 1rem;
  margin: 0;
  line-height: 1.5;
}

/* Stack vertically on phones instead of squeezing 3 columns side by side */
@media (max-width: 749px) {
  .features {
    flex-direction: column;
    align-items: center;
    padding: 32px 20px;
  }

  .features__item {
    max-width: 100%;
  }
}