@import "../../helpers";
.sf-dashboard-grid {
  --banner-align-items: flex-start;
  --banner-container-width: 100%;
  --banner-description-margin: var(--spacer-xl) 0;
  &__row {
    display: var(--dashboard-grid-row-display, block);
    flex: var(--dashboard-grid-row-flex);
    margin: var(--dashboard-grid-row-margin, 0);
  }
  &__col {
    display: var(--dashboard-grid-col-display, block);
    flex: var(--dashboard-grid-col-flex);
    margin: var(--dashboard-grid-col-margin, 0);
    & + & {
      --dashboard-grid-col-margin: var(--spacer-sm) 0 0 0;
    }
  }
  @include for-desktop {
    --dashboard-grid-row-display: flex;
    --dashboard-grid-row-flex: 0 0 100%;
    --dashboard-grid-col-display: flex;
    &__row {
      --dashboard-grid-row-margin: 0;
      & + & {
        --dashboard-grid-row-margin: var(--spacer-xl) 0 0 0;
      }
    }
    &__col {
      --dashboard-grid-col-flex: 1;
      flex-wrap: wrap;
      --dashboard-grid-col-margin: 0;
      & + & {
        --dashboard-grid-col-margin: 0 0 0 var(--spacer-xl);
      }
      & > .sf-banner,
      & > a {
        display: flex;
        flex: 1;
      }
      &--small { 
        --dashboard-grid-col-flex: 0 1 36%;
      }
      &--medium {
        --dashboard-grid-col-flex: 0 1 40%;
        --banner-container-width: 70%;
      }
      &--higher {
        --banner-height: 510px;
      }
      &--col-1 {
        --dashboard-grid-col-flex: 0 1 8.3333333333%;
        --banner-container-width: 8.3333333333%;
      }
      &--col-2 {
        --dashboard-grid-col-flex: 0 1 16.6666666666%;
      }
      &--col-3 {
        --dashboard-grid-col-flex: 0 1 24.9999999999%;
      }
      &--col-4 {
        --dashboard-grid-col-flex: 0 1 33.3333333333%;
      }
      &--col-5 {
        --dashboard-grid-col-flex: 0 1 41.6666666665%;
      }
      &--col-6 {
        --dashboard-grid-col-flex: 0 1 50%;
      }
    }
  }
}