:root {
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
}

/* GRID */

.grid {
  display: grid;
  grid-template-columns: 1fr; /* mobile-first: 1 колонка */
}

.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }

.col-span-1 { grid-column: span 1; }
.col-span-2 { grid-column: span 2; }
.col-span-3 { grid-column: span 3; }
.col-span-4 { grid-column: span 4; }

/* Responsive grid колонки */

@media (min-width: 768px) {
  .md\:cols-2 { grid-template-columns: repeat(2, 1fr); }
  .md\:cols-3 { grid-template-columns: repeat(3, 1fr); }
  .md\:cols-4 { grid-template-columns: repeat(4, 1fr); }

  .md\:col-span-1 { grid-column: span 1; }
  .md\:col-span-2 { grid-column: span 2; }
  .md\:col-span-3 { grid-column: span 3; }
  .md\:col-span-4 { grid-column: span 4; }
}

@media (min-width: 1024px) {
  .lg\:cols-2 { grid-template-columns: repeat(2, 1fr); }
  .lg\:cols-3 { grid-template-columns: repeat(3, 1fr); }
  .lg\:cols-4 { grid-template-columns: repeat(4, 1fr); }

  .lg\:col-span-1 { grid-column: span 1; }
  .lg\:col-span-2 { grid-column: span 2; }
  .lg\:col-span-3 { grid-column: span 3; }
  .lg\:col-span-4 { grid-column: span 4; }
}

/* FLEX */

.flex {
  display: flex;
  flex-direction: column; /* mobile-first: stacked */
}

.flex-row { flex-direction: row; }
.flex-col { flex-direction: column; }

/* Responsive flex direction */

@media (min-width: 768px) {
  .md\:flex-row { flex-direction: row; }
  .md\:flex-col { flex-direction: column; }
}

@media (min-width: 1024px) {
  .lg\:flex-row { flex-direction: row; }
  .lg\:flex-col { flex-direction: column; }
}

/* GAP */

/* общий gap */
.gap0 { gap: 0; }
.gap1 { gap: var(--space-1); }
.gap2 { gap: var(--space-2); }
.gap3 { gap: var(--space-3); }

/* горизонтальный gap */
.gap0-x { column-gap: 0; }
.gap1-x { column-gap: var(--space-1); }
.gap2-x { column-gap: var(--space-2); }
.gap3-x { column-gap: var(--space-3); }

/* вертикальный gap */
.gap0-y { row-gap: 0; }
.gap1-y { row-gap: var(--space-1); }
.gap2-y { row-gap: var(--space-2); }
.gap3-y { row-gap: var(--space-3); }

/* Responsive GAP */

@media (min-width: 768px) {
  .md\:gap0   { gap: 0; }
  .md\:gap1 { gap: var(--space-1); }
  .md\:gap2 { gap: var(--space-2); }
  .md\:gap3 { gap: var(--space-3); }

  .md\:gap0-x { column-gap: 0; }
  .md\:gap1-x { column-gap: var(--space-1); }
  .md\:gap2-x { column-gap: var(--space-2); }
  .md\:gap3-x { column-gap: var(--space-3); }

  .md\:gap0-y { row-gap: 0; }
  .md\:gap1-y { row-gap: var(--space-1); }
  .md\:gap2-y { row-gap: var(--space-2); }
  .md\:gap3-y { row-gap: var(--space-3); }
}

@media (min-width: 1024px) {
  .lg\:gap0   { gap: 0; }
  .lg\:gap1 { gap: var(--space-1); }
  .lg\:gap2 { gap: var(--space-2); }
  .lg\:gap3 { gap: var(--space-3); }

  .lg\:gap0-x { column-gap: 0; }
  .lg\:gap1-x { column-gap: var(--space-1); }
  .lg\:gap2-x { column-gap: var(--space-2); }
  .lg\:gap3-x { column-gap: var(--space-3); }

  .lg\:gap0-y { row-gap: 0; }
  .lg\:gap1-y { row-gap: var(--space-1); }
  .lg\:gap2-y { row-gap: var(--space-2); }
  .lg\:gap3-y { row-gap: var(--space-3); }
}

/* FLEX CONTAINER ALIGNMENT */

.jc-f-start   { justify-content: flex-start; }
.jc-f-center  { justify-content: center; }
.jc-f-end     { justify-content: flex-end; }
.jc-f-between { justify-content: space-between; }
.jc-f-around  { justify-content: space-around; }
.jc-f-evenly  { justify-content: space-evenly; }

.ai-f-start   { align-items: flex-start; }
.ai-f-center  { align-items: center; }
.ai-f-end     { align-items: flex-end; }
.ai-f-stretch { align-items: stretch; }

/* Responsive FLEX CONTAINER ALIGNMENT */

@media (min-width: 768px) {
  .md\:jc-f-start   { justify-content: flex-start; }
  .md\:jc-f-center  { justify-content: center; }
  .md\:jc-f-end     { justify-content: flex-end; }
  .md\:jc-f-between { justify-content: space-between; }
  .md\:jc-f-around  { justify-content: space-around; }
  .md\:jc-f-evenly  { justify-content: space-evenly; }

  .md\:ai-f-start   { align-items: flex-start; }
  .md\:ai-f-center  { align-items: center; }
  .md\:ai-f-end     { align-items: flex-end; }
  .md\:ai-f-stretch { align-items: stretch; }
}

@media (min-width: 1024px) {
  .lg\:jc-f-start   { justify-content: flex-start; }
  .lg\:jc-f-center  { justify-content: center; }
  .lg\:jc-f-end     { justify-content: flex-end; }
  .lg\:jc-f-between { justify-content: space-between; }
  .lg\:jc-f-around  { justify-content: space-around; }
  .lg\:jc-f-evenly  { justify-content: space-evenly; }

  .lg\:ai-f-start   { align-items: flex-start; }
  .lg\:ai-f-center  { align-items: center; }
  .lg\:ai-f-end     { align-items: flex-end; }
  .lg\:ai-f-stretch { align-items: stretch; }
}

/* GRID CONTAINER ALIGNMENT */

.ji-g-start    { justify-items: start; }
.ji-g-center   { justify-items: center; }
.ji-g-end      { justify-items: end; }
.ji-g-stretch  { justify-items: stretch; }

.ai-g-start    { align-items: start; }
.ai-g-center   { align-items: center; }
.ai-g-end      { align-items: end; }
.ai-g-stretch  { align-items: stretch; }

/* Responsive GRID CONTAINER ALIGNMENT */

@media (min-width: 768px) {
  .md\:ji-g-start   { justify-items: start; }
  .md\:ji-g-center  { justify-items: center; }
  .md\:ji-g-end     { justify-items: end; }
  .md\:ji-g-stretch { justify-items: stretch; }

  .md\:ai-g-start   { align-items: start; }
  .md\:ai-g-center  { align-items: center; }
  .md\:ai-g-end     { align-items: end; }
  .md\:ai-g-stretch { align-items: stretch; }
}

@media (min-width: 1024px) {
  .lg\:ji-g-start   { justify-items: start; }
  .lg\:ji-g-center  { justify-items: center; }
  .lg\:ji-g-end     { justify-items: end; }
  .lg\:ji-g-stretch { justify-items: stretch; }

  .lg\:ai-g-start   { align-items: start; }
  .lg\:ai-g-center  { align-items: center; }
  .lg\:ai-g-end     { align-items: end; }
  .lg\:ai-g-stretch { align-items: stretch; }
}

/* INDIVIDUAL ITEM ALIGNMENT */

.js-start    { justify-self: start; }
.js-center   { justify-self: center; }
.js-end      { justify-self: end; }
.js-stretch  { justify-self: stretch; }

.as-start    { align-self: start; }
.as-center   { align-self: center; }
.as-end      { align-self: end; }
.as-stretch  { align-self: stretch; }

/* Responsive INDIVIDUAL ITEM ALIGNMENT */

@media (min-width: 768px) {
  .md\:js-start    { justify-self: start; }
  .md\:js-center   { justify-self: center; }
  .md\:js-end      { justify-self: end; }
  .md\:js-stretch  { justify-self: stretch; }

  .md\:as-start    { align-self: start; }
  .md\:as-center   { align-self: center; }
  .md\:as-end      { align-self: end; }
  .md\:as-stretch  { align-self: stretch; }
}

@media (min-width: 1024px) {
  .lg\:js-start    { justify-self: start; }
  .lg\:js-center   { justify-self: center; }
  .lg\:js-end      { justify-self: end; }
  .lg\:js-stretch  { justify-self: stretch; }

  .lg\:as-start    { align-self: start; }
  .lg\:as-center   { align-self: center; }
  .lg\:as-end      { align-self: end; }
  .lg\:as-stretch  { align-self: stretch; }
}

/* PADDING */

.p0 { padding: 0; }
.p1 { padding: var(--space-1); }
.p2 { padding: var(--space-2); }
.p3 { padding: var(--space-3); }

.p0-x { padding-left: 0; padding-right: 0; }
.p1-x { padding-left: var(--space-1); padding-right: var(--space-1); }
.p2-x { padding-left: var(--space-2); padding-right: var(--space-2); }
.p3-x { padding-left: var(--space-3); padding-right: var(--space-3); }

.p0-y { padding-top: 0; padding-bottom: 0; }
.p1-y { padding-top: var(--space-1); padding-bottom: var(--space-1); }
.p2-y { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.p3-y { padding-top: var(--space-3); padding-bottom: var(--space-3); }

/* Responsive PADDING */

@media (min-width: 768px) {
  .md\:p0 { padding: 0; }
  .md\:p1 { padding: var(--space-1); }
  .md\:p2 { padding: var(--space-2); }
  .md\:p3 { padding: var(--space-3); }

  .md\:p0-x { padding-left: 0; padding-right: 0; }
  .md\:p1-x { padding-left: var(--space-1); padding-right: var(--space-1); }
  .md\:p2-x { padding-left: var(--space-2); padding-right: var(--space-2); }
  .md\:p3-x { padding-left: var(--space-3); padding-right: var(--space-3); }

  .md\:p0-y { padding-top: 0; padding-bottom: 0; }
  .md\:p1-y { padding-top: var(--space-1); padding-bottom: var(--space-1); }
  .md\:p2-y { padding-top: var(--space-2); padding-bottom: var(--space-2); }
  .md\:p3-y { padding-top: var(--space-3); padding-bottom: var(--space-3); }
}

@media (min-width: 1024px) {
  .lg\:p0 { padding: 0; }
  .lg\:p1 { padding: var(--space-1); }
  .lg\:p2 { padding: var(--space-2); }
  .lg\:p3 { padding: var(--space-3); }

  .lg\:p0-x { padding-left: 0; padding-right: 0; }
  .lg\:p1-x { padding-left: var(--space-1); padding-right: var(--space-1); }
  .lg\:p2-x { padding-left: var(--space-2); padding-right: var(--space-2); }
  .lg\:p3-x { padding-left: var(--space-3); padding-right: var(--space-3); }

  .lg\:p0-y { padding-top: 0; padding-bottom: 0; }
  .lg\:p1-y { padding-top: var(--space-1); padding-bottom: var(--space-1); }
  .lg\:p2-y { padding-top: var(--space-2); padding-bottom: var(--space-2); }
  .lg\:p3-y { padding-top: var(--space-3); padding-bottom: var(--space-3); }
}

/* MARGIN */

.m0 { margin: 0; }
.m1 { margin: var(--space-1); }
.m2 { margin: var(--space-2); }
.m3 { margin: var(--space-3); }

.m0-x { margin-left: 0; margin-right: 0; }
.m1-x { margin-left: var(--space-1); margin-right: var(--space-1); }
.m2-x { margin-left: var(--space-2); margin-right: var(--space-2); }
.m3-x { margin-left: var(--space-3); margin-right: var(--space-3); }

.m0-y { margin-top: 0; margin-bottom: 0; }
.m1-y { margin-top: var(--space-1); margin-bottom: var(--space-1); }
.m2-y { margin-top: var(--space-2); margin-bottom: var(--space-2); }
.m3-y { margin-top: var(--space-3); margin-bottom: var(--space-3); }

/* Responsive MARGIN */

@media (min-width: 768px) {
  .md\:m0 { margin: 0; }
  .md\:m1 { margin: var(--space-1); }
  .md\:m2 { margin: var(--space-2); }
  .md\:m3 { margin: var(--space-3); }

  .md\:m0-x { margin-left: 0; margin-right: 0; }
  .md\:m1-x { margin-left: var(--space-1); margin-right: var(--space-1); }
  .md\:m2-x { margin-left: var(--space-2); margin-right: var(--space-2); }
  .md\:m3-x { margin-left: var(--space-3); margin-right: var(--space-3); }

  .md\:m0-y { margin-top: 0; margin-bottom: 0; }
  .md\:m1-y { margin-top: var(--space-1); margin-bottom: var(--space-1); }
  .md\:m2-y { margin-top: var(--space-2); margin-bottom: var(--space-2); }
  .md\:m3-y { margin-top: var(--space-3); margin-bottom: var(--space-3); }
}

@media (min-width: 1024px) {
  .lg\:m0 { margin: 0; }
  .lg\:m1 { margin: var(--space-1); }
  .lg\:m2 { margin: var(--space-2); }
  .lg\:m3 { margin: var(--space-3); }

  .lg\:m0-x { margin-left: 0; margin-right: 0; }
  .lg\:m1-x { margin-left: var(--space-1); margin-right: var(--space-1); }
  .lg\:m2-x { margin-left: var(--space-2); margin-right: var(--space-2); }
  .lg\:m3-x { margin-left: var(--space-3); margin-right: var(--space-3); }

  .lg\:m0-y { margin-top: 0; margin-bottom: 0; }
  .lg\:m1-y { margin-top: var(--space-1); margin-bottom: var(--space-1); }
  .lg\:m2-y { margin-top: var(--space-2); margin-bottom: var(--space-2); }
  .lg\:m3-y { margin-top: var(--space-3); margin-bottom: var(--space-3); }
}