layout-views-grid-vertical.pcss.css

/**
 * @file
 * Responsive styles for views grid vertical layout.
 */

@import "../base/variables.pcss.css";

:root {
  --views-grid-layout-gap: var(--sp);
}

.views-view-grid--vertical {
  margin-block-end: calc(-1 * var(--views-grid-layout-gap)); /* Offset the bottom row's padding. */
  column-gap: var(--views-grid-layout-gap);

  &.cols-2 {
    @media (--sm) {
      column-count: 2;
    }
  }

  &.cols-3 {
    @media (--sm) {
      column-count: 2;
    }

    @media (--md) {
      column-count: 3;
    }
  }

  &.cols-4 {
    @media (--sm) {
      column-count: 2;
    }

    @media (--md) {
      column-count: 3;
    }

    @media (--lg) {
      column-count: 4;
    }
  }

  &.cols-5 {
    @media (--sm) {
      column-count: 2;
    }

    @media (--md) {
      column-count: 3;
    }

    @media (--lg) {
      column-count: 5;
    }
  }

  &.cols-6 {
    @media (--sm) {
      column-count: 2;
    }

    @media (--md) {
      column-count: 3;
    }

    @media (--lg) {
      column-count: 6;
    }
  }

  &.cols-7 {
    @media (--sm) {
      column-count: 2;
    }

    @media (--md) {
      column-count: 3;
    }

    @media (--lg) {
      column-count: 7;
    }
  }

  &.cols-8 {
    @media (--sm) {
      column-count: 2;
    }

    @media (--md) {
      column-count: 4;
    }

    @media (--lg) {
      column-count: 8;
    }
  }

  & .views-view-grid__item {
    & > * {
      padding-block-end: var(--views-grid-layout-gap);
      break-inside: avoid;
    }
  }
}