/*
1. Prefixes:
    - m - margin
    - p - padding
    - g - gap
2. Position (after prefix):
    - t - top
    - b - bottom
    - l - left
    - r - right
    - x - horizontal (left + right)
    - y - vertical (top + bottom)

3. Sizes (suffixes):
    - xs (4px), s (8px), m (12px), l (24px),
    - xl (32px), 2xl (48px), 5xl (72px) etc.
*/

/* Gaps */
.g-xs {gap: var(--n-s)} /* 4px */
.g-s {gap: var(--n-m)} /* 8px */
.g-m {gap: var(--n-l)} /* 12px */
.g-l {gap: var(--n-2xl)} /* 24px */

.g-flex {gap: var(--gpm-m)} /* 12px < 16px < 24px button group */

.g-grid-xs {
  column-gap: var(--n-2xl);
  row-gap: var(--n-s)
}
.g-grid {
  column-gap: var(--n-2xl);
  row-gap: clamp(var(--n-2xl),3vw,var(--n-4xl)) /* max 48px */
}

.g-grid-xl {
  column-gap: var(--n-2xl);
  row-gap: clamp(var(--n-4xl),4vw,var(--n-6xl)) /* max 96px */
}

/* Margins */
.m-l-a {margin-left: auto}
.m-r-a {margin-right: auto}
.m-t-a {margin-top: auto}
.m-t-s {margin-top: var(--n-l)}
.m-t-m {margin-top: var(--n-xl)}
.m-t-2xl {margin-top: var(--n-4xl)}

/* Paddings */
.p-card-xs {padding: var(--n-s)}
.p-card-s {padding: var(--n-m)}
.p-card-m {padding: var(--n-l)}
.p-card-l {padding: clamp(var(--n-l),1.9vw,var(--n-2xl))} /* card padding */
.p-card-xl {padding: clamp(var(--n-2xl),3vw,var(--n-4xl))} /* dialogs */

.p-s {padding: var(--n-m)}
.p-l {padding-left: var(--p-side)}
.p-r {padding-right: var(--p-side)}
.p_tb-xs{padding: var(--n-l) 0}
.p_tb-s{padding: var(--n-xl) 0}

/*
.pad_t-1 {padding-top: var(--n-l)}
.pad_t_6 {padding-top:clamp(var(--n-2xl),3vw,var(--n-5xl))}

.pad_tb-m{padding: var(--n-xl) 0}

/* absolute position */
/* abs = position: absolute
lt = left + top
rt = right + top
lb = left + bottom
rb = right + bottom
s/m = размер отступа в пикселях */
.pos-a-rb{right: 0;bottom: 0}
.pos-a-c{top:50%;left:50%;translate:-50% -50%}

/* Small (12px) */
.abs-lt-s {position: absolute; left: var(--n-l); top: var(--n-l)}