/* ==========================================================
   CITYGO LAYOUT SYSTEM
========================================================== */

.cg-page {
    width: 100%;
    background: var(--cg-bg);
}

.cg-container {
    width: min(var(--cg-max), calc(100% - var(--cg-page-x)));
    margin-inline: auto;
}

.cg-section {
    padding-block: var(--cg-section-gap);
}

.cg-section--tight {
    padding-block: 32px;
}

.cg-section--large {
    padding-block: 86px;
}

.cg-grid {
    display: grid;
    gap: 24px;
}

.cg-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cg-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cg-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cg-flex {
    display: flex;
}

.cg-flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cg-flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cg-stack {
    display: grid;
    gap: 16px;
}

.cg-stack--sm {
    gap: 10px;
}

.cg-stack--lg {
    gap: 28px;
}

@media (max-width: 1100px) {
    :root {
        --cg-page-x: 32px;
    }

    .cg-grid--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cg-grid--3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    :root {
        --cg-page-x: 24px;
        --cg-section-gap: 42px;
    }

    .cg-grid--2,
    .cg-grid--3,
    .cg-grid--4 {
        grid-template-columns: 1fr;
    }

    .cg-section--large {
        padding-block: 58px;
    }
}