:root {
  /* Grids */
  --grid-1: repeat(1, minmax(0, 1fr));
  --grid-2: repeat(2, minmax(0, 1fr));
  --grid-3: repeat(3, minmax(0, 1fr));
  --grid-4: repeat(4, minmax(0, 1fr));
  --grid-5: repeat(5, minmax(0, 1fr));
  --grid-6: repeat(6, minmax(0, 1fr));
  --grid-7: repeat(7, minmax(0, 1fr));
  --grid-8: repeat(8, minmax(0, 1fr));
  --grid-9: repeat(9, minmax(0, 1fr));
  --grid-10: repeat(10, minmax(0, 1fr));
  --grid-11: repeat(11, minmax(0, 1fr));
  --grid-12: repeat(12, minmax(0, 1fr));
  --grid-1-2: minmax(0, 1fr) minmax(0, 2fr);
  --grid-1-3: minmax(0, 1fr) minmax(0, 3fr);
  --grid-2-3: minmax(0, 2fr) minmax(0, 3fr);
  --grid-2-1: minmax(0, 2fr) minmax(0, 1fr);
  --grid-3-1: minmax(0, 3fr) minmax(0, 1fr);
  --grid-3-2: minmax(0, 3fr) minmax(0, 2fr);
  --grid-3-4: minmax(0, 3fr) minmax(0, 4fr);
  --grid-4-3: minmax(0, 4fr) minmax(0, 3fr);

  /* Auto grids */
  --auto-grid-aggressiveness: 0.7;
  --grid-auto-2: repeat(
    auto-fit,
    minmax(
      min(
        100%,
        max(
          calc((var(--content-width) - ((2 - 1) * var(--grid-gap))) / 2) *
            var(--auto-grid-aggressiveness),
          (100% - (2 - 1) * var(--grid-gap)) / 2
        )
      ),
      1fr
    )
  );
  --grid-auto-3: repeat(
    auto-fit,
    minmax(
      min(
        100%,
        max(
          calc((var(--content-width) - ((3 - 1) * var(--grid-gap))) / 3) *
            var(--auto-grid-aggressiveness),
          (100% - (3 - 1) * var(--grid-gap)) / 3
        )
      ),
      1fr
    )
  );
  --grid-auto-4: repeat(
    auto-fit,
    minmax(
      min(
        100%,
        max(
          calc((var(--content-width) - ((4 - 1) * var(--grid-gap))) / 4) *
            var(--auto-grid-aggressiveness),
          (100% - (4 - 1) * var(--grid-gap)) / 4
        )
      ),
      1fr
    )
  );
  --grid-auto-5: repeat(
    auto-fit,
    minmax(
      min(
        100%,
        max(
          calc((var(--content-width) - ((5 - 1) * var(--grid-gap))) / 5) *
            var(--auto-grid-aggressiveness),
          (100% - (5 - 1) * var(--grid-gap)) / 5
        )
      ),
      1fr
    )
  );
  --grid-auto-6: repeat(
    auto-fit,
    minmax(
      min(
        100%,
        max(
          calc((var(--content-width) - ((6 - 1) * var(--grid-gap))) / 6) *
            var(--auto-grid-aggressiveness),
          (100% - (6 - 1) * var(--grid-gap)) / 6
        )
      ),
      1fr
    )
  );
  --grid-auto-7: repeat(
    auto-fit,
    minmax(
      min(
        100%,
        max(
          calc((var(--content-width) - ((7 - 1) * var(--grid-gap))) / 7) *
            var(--auto-grid-aggressiveness),
          (100% - (7 - 1) * var(--grid-gap)) / 7
        )
      ),
      1fr
    )
  );
  --grid-auto-8: repeat(
    auto-fit,
    minmax(
      min(
        100%,
        max(
          calc((var(--content-width) - ((8 - 1) * var(--grid-gap))) / 8) *
            var(--auto-grid-aggressiveness),
          (100% - (8 - 1) * var(--grid-gap)) / 8
        )
      ),
      1fr
    )
  );
  --grid-auto-9: repeat(
    auto-fit,
    minmax(
      min(
        100%,
        max(
          calc((var(--content-width) - ((9 - 1) * var(--grid-gap))) / 9) *
            var(--auto-grid-aggressiveness),
          (100% - (9 - 1) * var(--grid-gap)) / 9
        )
      ),
      1fr
    )
  );
  --grid-auto-10: repeat(
    auto-fit,
    minmax(
      min(
        100%,
        max(
          calc((var(--content-width) - ((10 - 1) * var(--grid-gap))) / 10) *
            var(--auto-grid-aggressiveness),
          (100% - (10 - 1) * var(--grid-gap)) / 10
        )
      ),
      1fr
    )
  );
  --grid-auto-11: repeat(
    auto-fit,
    minmax(
      min(
        100%,
        max(
          calc((var(--content-width) - ((11 - 1) * var(--grid-gap))) / 11) *
            var(--auto-grid-aggressiveness),
          (100% - (11 - 1) * var(--grid-gap)) / 11
        )
      ),
      1fr
    )
  );
  --grid-auto-12: repeat(
    auto-fit,
    minmax(
      min(
        100%,
        max(
          calc((var(--content-width) - ((12 - 1) * var(--grid-gap))) / 12) *
            var(--auto-grid-aggressiveness),
          (100% - (12 - 1) * var(--grid-gap)) / 12
        )
      ),
      1fr
    )
  );
}