.grid {
  --gap: var(--gap--lg);
  --maxWidth: min-content;
  --paddingBottom: 0px;
  --paddingLeft: 0px;
  --paddingRight: 0px;
  --paddingTop: 0px;

  display: grid;
  gap: var(--gap);
  width: min(var(--maxWidth), calc(100% - var(--paddingLeft) - var(--paddingRight)));
  padding: var(--paddingTop) var(--paddingRight) var(--paddingBottom) var(--paddingLeft);

  &--2columns&--notResponsive {
    grid-template-columns: 1fr 1fr;
  }

  &--3columns&--notResponsive {
    grid-template-columns: 1fr 1fr 1fr;
  }

  &--4columns&--notResponsive {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  &--maxWidthFit,
  &--maxWidthMedium,
  &--maxWidthLarge {
    margin-right: auto;
    margin-left: auto;
  }

  &--maxWidthLarge {
    --maxWidth: 1150px;
  }

  &--maxWidthMedium {
    --maxWidth: 826px;
  }

  &--noGap {
    --gap: 0px;
  }

  &--gap4xl {
    --gap: var(--gap--4xl);
  }

  &--gap3xl {
    --gap: var(--gap--3xl);
  }

  &--gapXxl {
    --gap: var(--gap--2xl);
  }

  &--gapXl {
    --gap: var(--gap--xl);
  }

  &--gap,
  &--gapLg {
    --gap: var(--gap--lg);
  }

  &--gapMd {
    --gap: var(--gap--md);
  }

  &--gapSm {
    --gap: var(--gap--sm);
  }

  &--gapXs {
    --gap: var(--gap--xs);
  }

  &--gapXxs {
    --gap: var(--gap--xxs);
  }

  &--noPadding {
    --paddingBottom: 0px;
    --paddingLeft: 0px;
    --paddingRight: 0px;
    --paddingTop: 0px;
  }

  &--padding {
    --paddingBottom: var(--padding--xl);
    --paddingLeft: var(--padding--xl);
    --paddingRight: var(--padding--xl);
    --paddingTop: var(--padding--xl);
  }

  &--paddingVertical {
    --paddingBottom: var(--padding--xl);
    --paddingTop: var(--padding--xl);
  }

  &--paddingHorizontal {
    --paddingLeft: var(--padding--xl);
    --paddingRight: var(--padding--xl);
  }

  // TODO: https://github.com/shoptet/cms4/issues/10138
  & > .typography {
    margin-top: unset;
    margin-bottom: unset;
  }

  &--gap-sm {
      gap: var(--gap--sm);
  }

  &--gap-xs {
      gap: var(--gap--xs);
  }

  &--v2form {
      gap: var(--gap--md) 40px; // 12px is current grid row gap in .filter__grid, 40px is new spacing, not implemented yet
  }

  &__v2formCol { // for proper displaying fields grouped in columns in grid--v2form
      display: flex;
      flex-flow: column;
      gap: var(--gap--sm);
  }

  @media @screen-md {
    &--2columns&--responsive {
        grid-template-columns: 1fr 1fr;
    }

    &--3columns&--responsive {
        grid-template-columns: 1fr 1fr 1fr;
    }

    &--4columns&--responsive {
        grid-template-columns: 1fr 1fr;
    }
  }

  @media @screen-lg {
      &--4columns&--responsive {
          grid-template-columns: 1fr 1fr 1fr 1fr;
      }
  }

  // TODO: These options below are available in smarty templates and should be removed from here
  @media @screen-md {
      &--2 {
          grid-template-columns: 1fr 1fr;
      }
  }

  @media @screen-sm {
      &--3 {
          grid-template-columns: 1fr 1fr 1fr;
      }

      &--4 {
          grid-template-columns: 1fr 1fr;
      }
  }

  @media @screen-lg {
      &--4 {
          grid-template-columns: 1fr 1fr 1fr 1fr;
      }
  }
}