/* =========================================
   3. ЛЕЙАУТ И ГЕОМЕТРИЯ (layout.css)
========================================= */

/* --- Flexbox --- */
.flex      { display: flex; }
.iflex     { display: inline-flex; }
.flex-col  { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-1    { flex: 1; }

/* Выравнивание Align Items (Вертикаль в frow) */
.ai-c  { align-items: center; }
.ai-s  { align-items: flex-start; }
.ai-e  { align-items: flex-end; }
.ai-st { align-items: stretch; }

/* Выравнивание Justify Content (Горизонталь в frow) */
.jc-c  { justify-content: center; }
.jc-s  { justify-content: flex-start; }
.jc-e  { justify-content: flex-end; }
.jc-sb { justify-content: space-between; }

/* --- Grid --- */
.grid   { display: grid; }
.igrid  { display: inline-grid; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* --- Gaps (Просветы) --- */
.gap5  { gap: 5px; }
.gap10 { gap: 10px; }
.gap15 { gap: 15px; }
.gap20 { gap: 20px; }
.gap30 { gap: 30px; }

/* --- Размеры --- */
.w100p { width: 100%; }
.w50p  { width: 50%; }
.w33p  { width: 33.33%; }
.h100p { height: 100%; }

.w5 { width: 5px; } .w10 { width: 10px; } .w20 { width: 20px; } .w50 { width: 50px; }
.w100 { width: 100px; } .w200 { width: 200px; } .w300 { width: 300px; } .w400 { width: 400px; }
.w500 { width: 500px; } .w600 { width: 600px; } .w800 { width: 800px; }

.mxw200 { max-width: 200px; } .mxw400 { max-width: 400px; }
.mxw600 { max-width: 600px; } .mxw800 { max-width: 800px; }

.h20 { height: 20px; } .h40 { height: 40px; } .h50 { height: 50px; }
.h100 { height: 100px; } .h200 { height: 200px; } .h300 { height: 300px; }

/* --- Отступы (Margins & Paddings) --- */
.m0 { margin: 0; } .m5 { margin: 5px; } .m10 { margin: 10px; } .m20 { margin: 20px; } .m30 { margin: 30px; }
.mt5 { margin-top: 5px; } .mt10 { margin-top: 10px; } .mt20 { margin-top: 20px; }
.mb5 { margin-bottom: 5px; } .mb10 { margin-bottom: 10px; } .mb20 { margin-bottom: 20px; } .mb30 { margin-bottom: 30px; }
.ml5 { margin-left: 5px; } .ml10 { margin-left: 10px; } .ml20 { margin-left: 20px; }
.mr5 { margin-right: 5px; } .mr10 { margin-right: 10px; } .mr20 { margin-right: 20px; }
.mha { margin-left: auto; margin-right: auto; }

.p0 { padding: 0; } .p5 { padding: 5px; } .p10 { padding: 10px; } .p20 { padding: 20px; } .p30 { padding: 30px; }
.pt5 { padding-top: 5px; } .pt10 { padding-top: 10px; } .pt20 { padding-top: 20px; }
.pb5 { padding-bottom: 5px; } .pb10 { padding-bottom: 10px; } .pb20 { padding-bottom: 20px; }
.pl5 { padding-left: 5px; } .pl10 { padding-left: 10px; } .pl20 { padding-left: 20px; }
.pr5 { padding-right: 5px; } .pr10 { padding-right: 10px; } .pr20 { padding-right: 20px; }

/* Горизонтальные и Вертикальные отступы */
.px5 { padding-left: 5px; padding-right: 5px; }
.px10 { padding-left: 10px; padding-right: 10px; }
.px20 { padding-left: 20px; padding-right: 20px; }
.py5 { padding-top: 5px; padding-bottom: 5px; }
.py10 { padding-top: 10px; padding-bottom: 10px; }
.py20 { padding-top: 20px; padding-bottom: 20px; }

/* --- Позиционирование --- */
.pr { position: relative; }
.pa { position: absolute; }
.pf { position: fixed; }
.ps { position: sticky; }
.t0 { top: 0; } .r0 { right: 0; } .b0 { bottom: 0; } .l0 { left: 0; }