@import '../../core';

.bfo-grid {
  margin-bottom: 1rem;
  --bfo-grid-item-size: 100px;
  display: grid;
  justify-items: stretch;
  align-items: stretch;
  justify-content: stretch;
  grid-auto-flow: row;
  grid-template-columns: repeat(
    auto-fit,
    minmax(var(--bfo-grid-item-size), 1fr)
  );
  // grid-template-columns: repeat(var(--bfo-grid-column-count), auto);
  &--item-size {
    &-s {
      --bfo-grid-item-size: 200px;
    }
    &-m {
      --bfo-grid-item-size: 300px;
    }
    &-l {
      --bfo-grid-item-size: 500px;
    }
  }
  &--gap-size {
    &-s {
      gap: var(--bfo-spacing-base-s);
    }
    &-m {
      gap: var(--bfo-spacing-base-m);
    }
    &-l {
      gap: var(--bfo-spacing-base-l);
    }
  }
  & .bfo-grid__item {
    display: flex;
    // flex-direction: column;
    // justify-content: stretch;

    > * {
      width: 100%;
      margin: 0;
    }
  }
}