/* === Reset (замена Bootstrap Reboot) === */
*, *::before, *::after { box-sizing: border-box; }
html { line-height: 1.15; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font-body, 'Gegel-Body', sans-serif); font-size: 16px; font-weight: 400; line-height: 1.5; color: #212529; background-color: var(--color-bg-primary); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: 0.5rem; font-weight: 500; line-height: 1.2; }
p { margin-top: 0; margin-bottom: 1rem; }
a { color: inherit; text-decoration: none; background-color: transparent; }
a:hover { text-decoration: none; }
img { vertical-align: middle; border-style: none; max-width: 100%; height: auto; }
table { border-collapse: collapse; }
button, input, optgroup, select, textarea { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; }
button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; cursor: pointer; }
ul, ol { margin-top: 0; margin-bottom: 1rem; padding-left: 2rem; }
hr { box-sizing: content-box; height: 0; overflow: visible; border: 0; border-top: 1px solid rgba(0,0,0,.1); margin: 1rem 0; }
label { display: inline-block; margin-bottom: 0.5rem; }

/* Gegel Grid System — Bootstrap 4 Grid replacement */
/* Only classes actually used in templates */

/* ===== Container ===== */
.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 576px)  { .container { max-width: 540px; } }
@media (min-width: 768px)  { .container { max-width: 720px; } }
@media (min-width: 992px)  { .container { max-width: 920px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }
@media (min-width: 1400px) { .container { max-width: 1280px; } }

/* ===== Row ===== */
.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

/* ===== Columns base ===== */
[class*="col-"] {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

/* Default (mobile-first) */
.col-1  { flex: 0 0  8.3333%; max-width:  8.3333%; }
.col-2  { flex: 0 0 16.6667%; max-width: 16.6667%; }
.col-12 { flex: 0 0 100%;     max-width: 100%; }

/* SM (>= 576px) */
@media (min-width: 576px) {
    .col-sm-12 { flex: 0 0 100%; max-width: 100%; }
}

/* MD (>= 768px) */
@media (min-width: 768px) {
    .col-md-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
    .col-md-5  { flex: 0 0 41.6667%; max-width: 41.6667%; }
    .col-md-7  { flex: 0 0 58.3333%; max-width: 58.3333%; }
    .col-md-8  { flex: 0 0 66.6667%; max-width: 66.6667%; }
    .col-md-12 { flex: 0 0 100%;     max-width: 100%; }
}

/* LG (>= 992px) */
@media (min-width: 992px) {
    .col-lg-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
    .col-lg-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }
    .col-lg-9 { flex: 0 0 75%;      max-width: 75%; }
}

/* XL (>= 1200px) */
@media (min-width: 1200px) {
    .col-xl-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
    .col-xl-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }
    .col-xl-9 { flex: 0 0 75%;      max-width: 75%; }
}

/* ===== Utilities ===== */
.text-center         { text-align: center; }
.mx-auto             { margin-left: auto; margin-right: auto; }