/* ====================== */
/* БАЗОВАЯ СЕТКА */
/* ====================== */

.g {
    display: grid;
}

.g-inline {
    display: inline-grid;
}

/* ====================== */
/* КОЛОНКИ */
/* ====================== */

/* Фиксированные колонки */
.g-cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

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

/* Адаптивные колонки */
.g-cols-auto {
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
}

.g-cols-responsive {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* Специальный вариант для 3 колонок с центральной фиксированной */
.g-cols-3-special {
    grid-template-columns: auto minmax(150px, 800px) auto;
}

/* ====================== */
/* ОТСТУПЫ */
/* ====================== */

.g-gap-xs { gap: 0.25rem; }
.g-gap-sm { gap: 0.5rem; }
.g-gap-md { gap: 1rem; }
.g-gap-lg { gap: 1.5rem; }
.g-gap-xl { gap: 2rem; }


.gap-col-xs { column-gap: 0.25rem; }
.gap-col-sm { column-gap: 0.5rem; }
.gap-col-md { column-gap: 1rem; }
.gap-col-lg { column-gap: 1.5rem; }
.gap-col-xl { column-gap: 2rem; }

/* ====================== */
/* ВЫРАВНИВАНИЕ */
/* ====================== */

.g-center {
    place-items: center;
}

.g-left {
    justify-items: start;
}

.g-right {
    justify-items: end;
}

.g-j-center {
    justify-items: center;
}

.g-stretch {
    align-items: stretch;
}