.payout-workflow-visualization {
  display: grid;
  grid-template-columns: minmax($spacing-xxl, $spacing-4xl) 0px minmax($spacing-xxl, $spacing-4xl) 0px minmax($spacing-xxl, $spacing-4xl) 0px minmax($spacing-xxl, $spacing-4xl);
  grid-template-rows: auto;
  justify-items: center;
  place-items: center;
  text-align: center;
  gap: 1.5rem;
  @include media-breakpoint-up(lg) {
    grid-template-columns: minmax($spacing-xxl, $spacing-4xl) minmax(30px, 120px) minmax($spacing-xxl, $spacing-4xl) minmax(30px, 120px) minmax($spacing-xxl, $spacing-4xl) minmax(30px, 120px) minmax($spacing-xxl, $spacing-4xl);
  }
}

.payout-workflow-visualization .info-circle {
  max-width: $spacing-3xl;
}

.payout-workflow-visualization .arrow-connector {
  display: block;
  visibility: hidden;
  @include media-breakpoint-up(lg) {
    visibility: visible;
    height: 100%;
    width: 100%;
    background-image: url("@images/illustrations/workflow_payout_arrow.svg");
    background-repeat: no-repeat;
    background-position: right center;
  }
}