@import '../../../scss/styles';

.dashboard {
  width: 100%;
  --gap: var(--base);
  --cols: 5;

  &__wrap {
    padding-bottom: var(--spacing-view-bottom);
    display: flex;
    flex-direction: column;
    gap: var(--base);
  }

  &__group {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
  }

  &__label {
    margin: 0;
  }

  &__card-list {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    gap: var(--gap);
    flex-wrap: wrap;

    li {
      width: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
    }

    .card {
      height: 100%;
    }
  }

  @include large-break {
    --cols: 4;
  }

  @include mid-break {
    --gap: var(--base);
    --cols: 2;
  }

  @include small-break {
    --cols: 1;

    &__wrap {
      gap: var(--base);
    }
  }
}