@import "import";

.articleList {
  @include flex(column, flex-start, flex-start);
  gap: spacer(6);

  .upper {
    @include flex(column, flex-start, flex-start);
    gap: spacer(2);
    width: 100%;

    .title {
      @include type-item(heading-1);
    }

    .filterBar {
      @include flex($justify-content: space-between);
      width: 100%;
    }

    .children {
      margin-top: spacer(3);
      width: 100%;
    }
  }

  .divider {
    width: 100%;
  }

  .articles {
    display: grid;
    grid-gap: spacer(6);
    width: 100%;

    &:not(:only-child):last-child {
      margin-top: spacer(xs);
    }
  }

  .cardWrapper {
    @include flex($justify-content: flex-start);

    @include breakpoint(medium) {
      display: inline-block;
    }
  }
}

.articleList.standard {
  .articles > *:not(:last-child) {
    padding-bottom: spacer(6);
    border-bottom: 1px solid currentColor;
  }
}

.articleList.compact {
  .articles {
    grid-template-columns: 1fr;
    grid-auto-rows: 1fr;

    @include breakpoint(medium) {
      grid-template-columns: repeat(2, 1fr);
    }

    @include breakpoint(large) {
      grid-template-columns: repeat(3, 1fr);
    }
  }
}