@use "core/site-config";
@use "core/mq";
@use "s360-toolkit";

.view--display-grid {
  > .view__content > .view__rows {
    display: grid;
    grid-template-columns: repeat(var(--view-grid-template-columns, 1), 1fr);
    column-gap: site-config.$column-gap;
    row-gap: var(--view-grid-row-gap, #{ site-config.$spacing-xs });
  }

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

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

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

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