@use "@s360-base-theme/ui-core/site-config";
@use "@s360-base-theme/ui-core/mq";
@use "s360-scss-toolkit";

.view--grid {
  > .view__content > .view__grid {
    display: grid;
    grid-template-columns: repeat(var(--view-grid--gtc, 1), 1fr);
    column-gap: site-config.$column-gap;
    row-gap: var(--view-grid--row-gap, #{ site-config.spacer(0) });
  }

  // **************************************************
  // MEDIA QUERIES

  @media (min-width: mq.$mq-768) {
    &.view--2-columns,
    &.view--3-columns,
    &.view--4-columns {
      --view-grid--gtc: 2;
    }
  }

  @media (min-width: mq.$mq-1024) {
    &.view--3-columns {
      --view-grid--gtc: 3;
    }

    &.view--4-columns {
      --view-grid--gtc: 4;
    }
  }
}
