@import "../../helpers";
.dashboard-module-wrapper {
  background: rgba(255,255,255,0.06);
  width: 100%;
}
.dashboard-module-wrapper .title {
  align-items: center;
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  display: flex;
  height: 48px;
  padding-left: 16px;
  width: 100%;
}
.dashboard-module-wrapper .title h4 {
  color: white;
  font-family: theinhardt-medium;
  font-weight: 500;
  margin: 0;
  opacity: 0.4;
}
.sf-banner-grid {
  --banner-align-items: flex-start;
  --banner-container-width: 100%;
  --banner-description-margin: var(--spacer-xl) 0;
  &__row {
    display: var(--banner-grid-row-display, block);
    flex: var(--banner-grid-row-flex);
    margin: var(--banner-grid-row-margin, 0);
  }
  &__col {
    display: var(--banner-grid-col-display, block);
    flex: var(--banner-grid-col-flex);
    margin: var(--banner-grid-col-margin, 0);
    & + & {
      --banner-grid-col-margin: var(--spacer-sm) 0 0 0;
    }
  }
  @include for-desktop {
    --banner-grid-row-display: flex;
    --banner-grid-row-flex: 0 0 100%;
    --banner-grid-col-display: flex;
    &__row {
      --banner-grid-row-margin: 0;
      & + & {
        --banner-grid-row-margin: var(--spacer-xl) 0 0 0;
      }
    }
    &__col {
      --banner-grid-col-flex: 1;
      flex-wrap: wrap;
      --banner-grid-col-margin: 0;
      & + & {
        --banner-grid-col-margin: 0 0 0 var(--spacer-xl);
      }
      & > .sf-banner,
      & > a {
        display: flex;
        flex: 1;
      }
      &--small { 
        --banner-grid-col-flex: 0 1 36%;
      }
      &--medium {
        --banner-grid-col-flex: 0 1 40%;
        --banner-container-width: 70%;
      }
      &--higher {
        --banner-height: 510px;
      }
      &--col-1 {
        --banner-grid-col-flex: 0 1 8.3333333333%;
        //--banner-container-width: 8.3333333333%;
      }
      &--col-2 {
        --banner-grid-col-flex: 0 1 16.6666666666%;
      }
      &--col-3 {
        --banner-grid-col-flex: 0 1 24.9999999999%;
      }
      &--col-4 {
        --banner-grid-col-flex: 0 1 33.3333333333%;
      }
      &--col-5 {
        --banner-grid-col-flex: 0 1 41.6666666666%;
      }
      &--col-6 {
        --banner-grid-col-flex: 0 1 50%;
      }
      &--col-7 {
        --banner-grid-col-flex: 0 1 58.3333333333%;
      }
      &--col-8 {
        --banner-grid-col-flex: 0 1 66.6666666666%;
      }
    }
  }
}