@use "../../../utils/variables";
@use "sass:map";

.outcomes {
  .outcome-cards {
    grid-auto-rows: auto;
    grid-template-columns: 1fr;
    @media (min-width: map.get(variables.$breakpoints, sm)) {
      grid-auto-rows: 1fr;
      grid-template-columns: 1fr 1fr;
    }
    @media (min-width: map.get(variables.$breakpoints, lg)) {
      grid-template-columns: 1fr 1fr 1fr;
    }
    @media (min-width: map.get(variables.$breakpoints, xl4)) {
      grid-template-columns: 1fr 1fr 1fr 1fr;
    }
    &__card {
      @media (min-width: map.get(variables.$breakpoints, sm)) {
        height: 100%;
        min-height: 280px;
      }
    }
  }

  .outcome {
    margin-bottom: var(--pf-global--spacer--md);
    &__title {
      margin-bottom: var(--pf-global--spacer--md);
    }
    &__property {
      margin-bottom: var(--pf-global--spacer--sm);
      max-width: 680px;
      &__name {
        font-weight: 600;
        padding-right: 1em;
      }
      &__value {
        &--bigger {
          font-size: 2em;
        }
      }
    }
  }

  .outcome .outcome {
    padding-left: var(--pf-global--spacer--md);
    border-left: 3px solid var(--pf-global--info-color--100);
    .outcome {
      margin-top: var(--pf-global--spacer--md);
    }
  }
  .outcome-cards__card--list-view {
    .pf-c-card__body > .outcome__title {
      display: none;
    }
  }
  .outcome--struct > .outcome-item > .outcome__title {
    margin-bottom: var(--pf-global--spacer--sm);
  }
  .outcome--struct .outcome--struct > .outcome-item > .outcome__title {
    margin-top: var(--pf-global--spacer--md);
  }
}
