.engagement-process {
  background: rgba(var(--color-brand-primary), 0.035);
}

.engagement-process__list {
  counter-reset: process;
  display: grid;
  gap: 2.4rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.engagement-process__step {
  background: rgb(var(--color-white));
  border: 0.1rem solid rgb(var(--color-border));
  border-radius: 1.4rem;
  min-height: 23rem;
  padding: 3.2rem 2.4rem 2.4rem;
  position: relative;
}

.engagement-process__number {
  align-items: center;
  background: rgb(var(--color-brand-primary));
  border-radius: 50%;
  color: rgb(var(--color-white));
  display: flex;
  font-size: var(--font-size-paragraph-extra-small);
  font-weight: var(--font-weight-paragraph-extra-small);
  height: 3.6rem;
  justify-content: center;
  left: 2.4rem;
  position: absolute;
  top: -1.8rem;
  width: 3.6rem;
}

.engagement-process__icon {
  color: rgb(var(--color-brand-primary));
  height: 4.8rem;
  margin-bottom: 2rem;
  width: 4.8rem;
}

.engagement-process__icon svg {
  height: 100%;
  width: 100%;
}

.engagement-process__step h3 {
  color: rgb(var(--color-brand-navy));
  font-size: var(--font-size-paragraph-regular);
  line-height: var(--line-height-paragraph-regular);
  margin: 0;
}

.engagement-process__step p {
  color: rgb(var(--color-text-muted));
  font-size: var(--font-size-paragraph-small);
  line-height: var(--line-height-paragraph-small);
  margin: 1rem 0 0;
}

@media screen and (max-width: 989px) {
  .engagement-process__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 4rem;
  }
}

@media screen and (max-width: 749px) {
  .engagement-process__list {
    grid-template-columns: 1fr;
  }

  .engagement-process__step {
    min-height: auto;
  }
}