@use "../../foundations/helpers/forward.helpers.scss" as *;
@use "../../components/group-header/group-header";
@use "./link-box-item";

.ds-link-box {
  background-color: $ds-color-surface-primary;

  .ds-link-box__grid {
    padding: ds-spacing($ds-s-100);
    display: grid;
    column-gap: ds-spacing($ds-s-050);
    row-gap: ds-spacing($ds-s-100);

    @include ds-mq-only-breakpoint(mobile) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    @include ds-mq-smallest-breakpoint(tablet) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  .ds-group-header + .ds-link-box__grid {
    padding-top: 0;
  }
}