src/styles/mixins/_layout.scss
/* 
  Arcjet's layout mixins
*/

// MAX CONTENT SIZE
// Used when wider screen estate is necessary, eg: full width views.
//////////////////////////////////////////////////////////////////////////////////////////

// 12 cols * 64px | 32px gap
@mixin content-max-1184 {
  --content-size-max: 1184px;
  --content-cols-max: 12;
}

// 14 cols * 64px | 32px gap
@mixin content-max-1360 {
  --content-size-max: 1360px;
  --content-cols-max: 14;
}

// 16 cols * 64px | 32px gap
@mixin content-max-1552 {
  --content-size-max: 1552px;
  --content-cols-max: 16;
}

// DEFAULT CONTENT SIZE
// This is the commonly used layout width.
//////////////////////////////////////////////////////////////////////////////////////////

// 10 cols * 64px | 32px gap
@mixin content-default-992 {
  --content-size-default: 992px;
  --content-cols-default: 10;
}

// 12 cols * 64px | 32px gap
@mixin content-default-1184 {
  --content-size-default: 1184px;
  --content-cols-default: 12;
}

// 14 cols * 64px | 32px gap
@mixin content-default-1360 {
  --content-size-default: 1360px;
  --content-cols-default: 14;
}

// 16 cols * 64px | 32px gap
@mixin content-default-1552 {
  --content-size-default: 1552px;
  --content-cols-default: 16;
}
